Vue.js的使用(一)
1.引入Vue.js
引入开发版本（包含了有帮助的命令行警告）：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
引入生产环境版本（优化了尺寸和速度）：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
创建一个div并且给出id：
<div id="app">
{{ message }}
</div>
然后在script中实例化Vue：
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})</script>
运行的结果就是{{message}}中显示的是Hello Vue
语法分析一下：这里面el是element的缩写，表示的是这个vue实例对html中哪个部分起作用，#app表示的就是起作用的id名称，所以对元素名称为“app”的元素起作用，而{{}}是固定写法，表示Vue的作用区域，在例子中如果不加{{}}那么显示的就是message而非Hello Vue了，data表示的Vue中的数据区域，要渲染的数据必须现在data中先定义好，否则就会报错undefined,data可以定义一个key,value键值对,也可以是一个对象:{}或者数组:[],
2.Vue的简单使用
首先Vue中的渲染是响应式的，就是data中的数据一经修改，界面显示的内容也会响应做出更新，比如你在浏览器vm.message中将它修改，界面也会修改
在标签内使用{{}}表示vue作用在此，那么在标签中呢？则使用v-bind，这是vue的一个指令，表示动态绑定，比如
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
则显示的是页面加载的当地时间,我们可以看出,加入v-bind:title后,title中则与我们的vue有了关联,就是表示这个地盘以后就是vue说了算,使用vue的语法规则,title与vue中的message绑定,所以界面中显示的就是加载的当地时间
当然了v-bind的有一个简写":" “v-bind:titile"和”:title"效果是一样的
3.Vue中的指令
vue中常见的指令:
1.v-bind是一个,简写:,表示与vue中的数据进行动态绑定用法我在上面也已经讲过了
2.v-text其实和{{}}是一回事
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
3.v-html:更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译,不推荐使用这个指令,太鸡肋了简单来说就是插入一段HTML语句
如:
<body>
<div id='app'>
<div v-html="template"></div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
template:`<div>我是新插入的html</div>`,
}
})
</script>
<!--结果显示我是新插入的html -->
这个指令很荣誉导致XSS共计,如果是一个小页面 小demo可以考虑使用,一般不建议使用
4.v-show:顾名思义,这个指令有关的肯定是show–显示方面的内容,事实上这个v-show指令根据真假值将标签中display设置为none或者还原:
<div v-show="true">我显示了</div> <!-- 结果：我显示了-->
<div v-show="false">我消失了</div> <!-- 结果：我消失了-->
一般v-show的使用：
<div v-show="isShow">我显示了</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
isShow:true,
template:`<div>我是新插入的html</div>`,
}
})
</script>
用方法来改变isShow的值来动态显示：
<body>
<div id='app'>
<div v-html="template"></div>
<button @click="handlclick()">点击控制显示</button>
<div v-show="isShow">我显示了</div>
</div>
</body>
<!-- -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
isShow: true,
template: `<div>我是新插入的html</div>`,
},
methods: {
handlclick() {
this.isShow = !this.isShow
},
}
})
v-if和v-else-if和v-else：这三个可以连用，学过编程语法的现在估计知道这是个怎么回事了，v-if和v-show都是用来控制标签显示的，不同的是v-show是将标签的css属性的display修改为none，但是他依然存在，而v-if则是销毁标签不存在也不占用内存。当然效果都是一样的
将上面的v-show改为v-if也是同样的效果，而v-else和v-else-if则和编程中的语法一样
比入v-if绑定一个div，v-else绑定一个span，他们绑定的要是同一个数据，加入都绑定isShow，v-if="isShow"，v-else='isShow'，则如果isShow为‘true’，div显示，ishow为假，span显示，可能有人会问了，真假就两个值，为啥多个v-else-if呢？
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
上这个代码估计就懂了
注意v-else和v-else-if只能和v-if连用，不能单独使用！
5.v-for：遍历vue中定义的数据
直接上代码：
<div id='app'>
<div v-html="template"></div>
<button @click="handlclick()">点击控制显示</button>
<div v-show="isShow">我显示了</div>
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
</div>
</body>
<!-- -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
isShow: true,
template: `<div>我是新插入的html</div>`,
items:[
{
id:1,
text:'我是第一个'
},
{ id:2,
text:'我是第二个'
},
{
id:3,
text:'我是第三个'
},
]
},
methods: {
handlclick() {
this.isShow = !this.isShow
},
}
})
</script>
可见显示了三个div，此例子中v-for的作用是将items数组中的每个对象取出来作为item显示在页面中，有多少个item就创建多少个div，可以遍历的有：Array | Object | number | string | Iterable (2.6 新增)
其中动态绑定的key是作为一个唯一标识key，为什么设置一个标识key呢？
原理：当我们对遍历的这个数组进行增删改时，我们的vue是怎么做的呢？
难道是把我们修改后的新数组与旧数组进行类似于嵌套for循环这种for（int i，i<newarr.leng,i++){for（int i，<oldarr.lenth,i++{}）}逐步取出每个数组的每一项，然后每个都对比吗？显然这样做的话太复杂度会很惊人，于是我们就巧妙的引入了一个唯一标识 Key，上次我的博客就写到，Vue在渲染时会创建一个虚拟的dom树，key就是在虚拟dom创建后，新旧数组直接对比key而不用对比内容了，找key相同的就直接对比内容，将新数组的值赋给旧数组，然后渲染到实际dom上，如果新数组有旧数组中没有的key，就增加一个key，如果没有，就删除一个key，对应的数组也增加或删除，这样性能就得到了一个量级的提升，复杂度由n的2次方变为n，
注意：key一定要加动态绑定指令v-bind或者简写“：” ，且key的值必须唯一，否则将造成渲染错误！
好了 今天写到这里
本文地址：https://blog.csdn.net/abcsxc258/article/details/111935387