Vue框架入门学习(一)——Vue 1.0

xiaoxiao2022-07-15 161

文章目录

一、简述二、入门介绍1.Vue 1.02.Vue基本指令(directive)2.1 v-bind2.2 v-model 数据双向绑定2.3 v-text2.4 v-html※2.5 v-on(Vue事件)2.6 v-show与v-if2.7 v-for2.8 虚拟dom2.9 ：key2.10 v-pre 预编译2.11 v-cloak阻塞 3.总结3.1 vm基本结构3.2 概念3.3 指令前端渲染 vs 后端渲染前端渲染：将一些细碎的零件通过自己组装来完成显示层，降低服务器负担，带宽压力小(由于显示层都拆成了散件，所以传输方便),用户体验更好，因为不用总去刷新也可以得到数据。后台渲染：直接完成整体架构，SEO，没有兼容问题，安全性更高，无法看见后台代码，但是维护差

一、简述

首先，Vue属于前台渲染，且更加倾向于数据方面，而不是在表现层方面代码更多的可以通过内部封装来实现。

二、入门介绍

1.Vue 1.0

在Vue1.0中，经常会将一个Vue.js的库直接导进来，调用使用。在Vue2.0后，将会使用npm下载，webpack打包整理Vue。

首先来写一个示例代码

运行此案例代码后会报错这是因为上面的Script标签只和目录内的文件起作用，并且是先识别divTest为我们的根目录，在匹配之前，没有定义，所以就要做出一定改变，以下如图。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TestVue</title> <script src="vue.js" charset="utf-8"></script> </head> <script> let vm = new Vue({//代表只在此领域范围内，这个Vue对象引用的才有意义 //用el组件标记根组件。 el:'#divTest' }); </script> <body> <div id="divTest"></div> </body> <script> let vm = new Vue({//代表只在此领域范围内，这个Vue对象引用的才有意义 //用el组件标记根组件。 el:'#divTest' }); </script> </html>

重新运行就可以了。然后来练习一下使用Vue来进行输出

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TestVue</title> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="divTest">  姓名：{{name}}<br> 年龄：{{age}} </div> </body> <script> let vm = new Vue({//代表只在此领域范围内，这个Vue对象引用的才有意义 //用el组件标记根组件。也称为容器 el:'#divTest', //数据本身 data:{ name:'blue', age:18 } }); </script> </html>

在Vue的对象内用data来标明某个对象的值，然后再之前el的根标签内，通过{{}}来将这个值进行直接的调用。去输出。这样写是有一定好处的，因为data内的数据变更了，那么现实的数据也会变更。而如果我们需要这些参数去做到一定的操作，是可以将具体操作封装在method内的，如下所示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TestVue</title> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="divTest">  姓名：{{name}}<br> 年龄：{{age}}<br> 出生：{{calBirth()}} </div> </body> <script> let vm = new Vue({//代表只在此领域范围内，这个Vue对象引用的才有意义 //用el组件标记根组件。也称为容器 el:'#divTest', //数据本身 data:{ name:'blue', age:18 }, method:{ calBirth(){//函数名，声明函数 return new Date().getFullYear()-this.age; } } }); </script> </html>

2.Vue基本指令(directive)

实际意义也就是通过这些指令来补充html所无法达到的功能，像获取数据之类的。

2.1 v-bind

这个指令可以用于任何属性当想往标签内的内容输入参数的时候，可以使用这个标签属性。

一般情况下我们想让标签获取到参数是这么写的，但是输出会有问题，显示的strong title不正确，这时候我们就可以使用到v-bind。

<!DOCTYPE html> <html lang="en" dir="ltr" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>TestVue</title> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="divTest"> <strong :title="age+'岁'">{{name}}</strong>  </div> </body> <script> let vm = new Vue({//代表只在此领域范围内，这个Vue对象引用的才有意义 //用el组件标记根组件。也称为容器 el:'#divTest', //数据本身 data:{ name:'blue', age:18 } }); </script> </html>

简写：可以省略v-bind，只留下一个冒号再举一个例子，引入网络图片的例子

<!DOCTYPE html> <html lang="en" dir="ltr" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>TestVue</title> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="divTest"> <strong :title="age+'岁'">{{name}}</strong>  <img :src="url" alt=""> </div> </body> <script> let vm = new Vue({//代表只在此领域范围内，这个Vue对象引用的才有意义 //用el组件标记根组件。也称为容器 el:'#divTest', //数据本身 data:{ name:'blue', age:18, url:'https://123p0.sogoucdn.com/imgu/2018/04/20180402191839_320.jpg' } }); </script> </html>

但是有两个标签的使用方法是不同的，第一个是class，第二个是style class的写法类似于一种数组写法，而style类似于一种json写法。但是也可以用v-bind来表示。

有这样一种情况，class用来做一种选择判断才生效的情况，如果写成字符串就不好表示，但是如果写成数组就会好很多，假如说用户达到心悦3才会显示某图标，就可以用这种方法。

<!DOCTYPE html> <html lang="en" dir="ltr" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>TestVue</title> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="divTest"> <div :class="class_arr"></div> </div> </body> <script> let vm = new Vue({//代表只在此领域范围内，这个Vue对象引用的才有意义 //用el组件标记根组件。也称为容器 el:'#divTest', //数据本身 data:{ name:'blue', age:18, class_str:'aa bb cc dd active', class_arr:['aa','bb','cc','dd','active'] } }); </script> </html>

同理style也是一样的，就不多举例了。

2.2 v-model 数据双向绑定

v-model仅仅适用于输入类组件，进行标签与data的双向绑定。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v_model</title> <script src="vue.js"></script> </head> <body> <div id="div1"> <input type="text" v-model="name"> <p> {{name}} </p> </div> <script> let vm = new Vue({ el:'#div1', data:{ name:'blue' } }) </script> </body> </html>

利用v-model来进行变量与输入标签的双向绑定注：通过v-model所引入的数据全是字符串属性，如果想换成其他类型，需要使用转型的api 然后写一个在methods内写入两个v-model进行参数的计算

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>v_model</title> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="div1"> <input type="text" v-model="n1">+ <input type="text" v-model="n2">= {{sum()}} </div> </body> <script> let vm = new Vue({ el:'#div1', data:{ n1:0, n2:0 }, methods:{ sum(){ return parseInt(this.n1)+parseInt(this.n2); } } }); </script> </html>

2.3 v-text

非转义输出用法十分简单，就是取代了手动输出，而是通过方法进行调用，基本没啥用，标签也不会自动转化。

2.4 v-html

转义输出，用处是有的，某些网站在评论的时候直接添加对应的html代码，但是如果评论了<script>这个标签就会让网站前台收到攻击，这属于一种注入式攻击。十分危险。但是可以让评论标签直接转化。

※2.5 v-on(Vue事件)

v-on的简称是用@ 设计一个按钮，每次点击后，参数会进行一定操作，需要事件来触发，可以在methods事件函数内放上对应的参数。

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="div1"> {{a}} <input type="button" value="+1" v-on:click="fn(5)"> </div> </body> <script> let vm=new Vue({ el: '#div1', data: { a:9 }, methods:{ fn(n){ this.a+=n; } } }); </script> </html>

2.6 v-show与v-if

二者都是控制样式的显示与隐藏。区别在于show是改变display的参数，而if是直接将样式进行删除

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" charset="utf-8"></script> <style media="screen"> .box{ width: 200px; height: 200px; background: #87ff73; } </style> </head> <body> <div id="div1"> <input type="button" value="显示隐藏" @click="fn(5)"> <div class="box" v-show="b"></div> </div> </body> <script> let vm = new Vue({ el: '#div1', data: { b: true }, methods: { fn(n) { this.b=!this.b; } } }); </script> </html>

2.7 v-for

循环遍历列表去显示 1.数组 v-for=“item,index in array” 2.json v-for=“val,key” 3.lists v-for=“index in lists”

列表

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" charset="utf-8"></script> <style media="screen"> </style> </head> <body> <div id="div1"> <ul> <li v-for="user,index in users"> {{index}}.用户名:{{user.name}} 密码:{{user.password}} </li> </ul> </div> </body> <script> let vm = new Vue({ el: '#div1', data: { users:[ {name:'blue',password:'123456'}, {name:'zhangsan',password:'654321'}, {name:'lisi',password:'111111'} ] }, methods: { fn(n) { this.b=!this.b; } } }); </script> </html>

json

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" charset="utf-8"></script> <style media="screen"> </style> </head> <body> <div id="div1"> <ul> <li v-for="val,name in style"> {{name}}：{{val}} </li> </ul> </div> </body> <script> let vm = new Vue({ el: '#div1', data: { style:{ width:'200px', height:'300px' } } }); </script> </html>

2.8 虚拟dom

我们在写标签的时候内部解析html转化为json去实现的，举例来说

转化为

{ tag:'ul', child:[ { tag:'li', child:[ .... ] } ] }

但是虚拟的dom想要实现样式也是需要映射到真是dom上才能去实现的，但是可以尽量找到重复渲染的次数，节约一些性能

2.9 ：key

：key属性 1.不能重复 2.不能改变

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" charset="utf-8"></script> <style media="screen"> </style> </head> <body> <div id="div1"> <ul> <li v-for="user,index in users" :key="user.id"> 用户名:{{user.name}} 密码:{{user.password}} </li> </ul> </div> </body> <script> let vm = new Vue({ el: '#div1', data: { users:[ {id:1,name:'blue',password:'123456'}, {id:3,name:'zhangsan',password:'654321'}, {id:7,name:'lisi',password:'111111'} ] }, methods: { fn(n) { this.b=!this.b; } } }); </script> </html>

2.10 v-pre 预编译

提高性能，为了防止出错

2.11 v-cloak阻塞

可以让被阻塞内容的时候不显示html代码，当阻塞结束之后再显示。

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" charset="utf-8"></script> <style media="screen"> *[v-cloak]{display: none} </style> </head> <body> <div id="div1" v-cloak> {{a}}，{{b}} </div> </body> <script></script> <script> let vm = new Vue({ el: '#div1', data: { a:12,b:5 } }); </script> </html>

3.总结

3.1 vm基本结构

提到了三个，还有很多没提过

new Vue({ el,data,methods computed,props,watch,template,router,... })

3.2 概念

数据同步利用原生js来实现数据同步

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div1"> 姓名：{{name}}<br> 年龄：{{age}} </div> </body> <script> let el=document.getElementById('div1'); let template=el.innerHTML; let _data={ name: 'blue', age: 18 }; let data=new Proxy(_data, { set(obj, name, value){ //alert(`有人视图设置 ${name}=>${value}`); obj[name]=value; //数据变了 //console.log('数据变了'); render(); } }); render(); function render(){ el.innerHTML=template.replace(/\{\{\w+\}\}/g, str=>{ str=str.substring(2, str.length-2); return _data[str]; }); } </script> </html>

双向绑定利用原生js来实现双向绑定

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div1"> <input type="text" v-model="name"><br> 姓名：{{name}}<br> 年龄：{{age}} </div> </body> <script> let el=document.getElementById('div1'); let template=el.innerHTML; let _data={ name: 'blue', age: 18 }; let data=new Proxy(_data, { set(obj, name, value){ //alert(`有人视图设置 ${name}=>${value}`); obj[name]=value; //数据变了 //console.log('数据变了'); render(); } }); render(); function render(){ //渲染 el.innerHTML=template.replace(/\{\{\w+\}\}/g, str=>{ str=str.substring(2, str.length-2); return _data[str]; }); //找所有的v-model Array.from(el.getElementsByTagName('input')) .filter(ele=>ele.getAttribute('v-model')) .forEach(input=>{ let name=input.getAttribute('v-model'); input.value=_data[name]; input.oninput=function (){ data[name]=this.value; }; }); } </script> </html>

虚拟dom

3.3 指令

最新回复(0)