标签：最好 浏览器 选择 -o 框架 bubuko 提高 自己 bst
Vue.js 是一构建用户界面的MVVM框架 ，只关注视图层
Vue将DOM和数据绑定起来，一旦创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。这样就减少了不必要的DOM操作提高渲染效率，让前端程序员只需要关心业务逻辑不再关心DOM是如何渲染的
MVC和MVVM的区别：MVC是后端分层开发概念，MVVM是前端视图层的概念，主要关注于视图层分离，也就是说MVVM把前端的视图层分为了三部分Model、View、ViewModel
相关介绍、教程和下载使用关注Vue官网
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
</head>
<body>
<!--将来new的Vue实例会控制这个元素中的所有内容,这个区域就是MVVM中的View-->
<div id="app">{{ msg }}</div>
<script>
//创建一个Vue实例,当我们导包后在浏览器内存中就多了一个Vue构造函数
//new出来的vm对象就是MVVM中的ViewModel
var vm = new Vue({
el: ‘#app‘, //表示new的这个实例,要控制页面的哪个区域.el为element缩写,填入的是选择器
data: { //data属性中存放的是el中要用到的数据,这个数据就是MVVM中的Model,专门用来保存每个页面数据
msg: ‘Hello Vue‘
}
//通过Vue提供的指令,很方便地就能把数据渲染到页面上,Vue不推荐手动操作DOM
})
</script>
</body>
</html>
基本指令
v-bloak 这个指令保持在元素上直到关联实例结束编译，和CSS规则如 [v-cloak]{ display: none } 一起用时，这个指令可以隐藏未编译的Mustache标签
Vue实例编译前，页面会显示{{ msg }}，不想它显示，可用v-bloak配合CSS来隐藏
<div id="app" v-bloak>{{ msg }}</div>
v-text 和 {{ }} 插值表达式一样会把数据插入到元素里，不同的是v-text会覆盖整个元素的内容，而插值表达式只会替换自己位置的字符
<div id="app" v-text="msg"></div>
v-html 将数据插入到元素里，并且会识别标签，v-text和v-html的区别就像innerText和innerHTML
<div id="app" v-html="msg"></div>
v-bind 用于绑定属性，如想插入数据到title属性中，使用插值表达式是不行的，此时就要用v-bind来绑定属性，此指令可简写为 :
v-bind中可写合法的js表达式，msg就相当于变量，所以可拼接字符串
<input type="button" v-bingd:title="msg" value="按钮">
<input type="button" :title="msg" value="按钮">
<input type="button" :title="msg+‘123‘" value="按钮">
v-on 事件绑定机制，很像原生js在标签中注册事件 onclic=“show()” 的方式，只不过现在使用vue的方式来绑定事件。可简写为 @
事件老是无法触发，检查了多遍后才发现，input标签要放在View中，也就是el指定的那个区域，否则v-on:指令无效
<div id="app">
<input type="button" value="按钮" v-on:click="show">
</div>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {
msg: ‘123‘
},
methods: { //这个methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert(‘Hello‘)
}
}
})
</script>
事件修饰符，绑定事件时可阻止事件冒泡、默认行为
.stop 阻止冒泡
.prevent 阻止默认行为
.capture 使用事件捕获模式，也就是反向冒泡
.self 只有当事件在该元素本身时才触发，隔绝其他元素对自身的冒泡，类似 jQuery中的mouseenter事件
.once 事件只触发一次，底层可能是事件触发后进行了事件解绑
<input type="text" value="按钮" v-on:click.stop="show">
v-model 实现表单元素和Model中数据的双向绑定，只能用于表单元素。v-bind只是单向绑定，如在文本框中，v-bind:value="msg" 后，msg的值会出现在文本框中，但这只是单向绑定，修改文本框中的值后msg值也跟着改变，这才是双向绑定
注意v-model后没有冒号也不跟属性，直接写等于
<input type="text" v-model="msg">
v-for 用来遍历数组、对象甚至数字
<!--遍历数组，list为data里的名为list的数组-->
<p v-for="item in list">{{ item }}</p>
<!--可以加第二个参数，(元素，索引)-->
<p v-for="(item,i) in list">{{ item }}索引是{{ i }}</p>
<!--如果是遍历对象的话，可以有三个参数，(值，键，索引)-->
<p v-for="(val,key,i) in obj">值是{{ val }},键为{{ key }},属性索引为{{ i }}</p>
<!--如果是遍历数字，则从1开始而不是0-->
<p v-for="n in 10">{{n}}</p>
有相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误
key属性值只能是number或string，而且因为key是属性所以也要用v-bind来绑定
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.name}}的id为{{item.id}}
</p>
v-if 根据表达式的真假来渲染元素
v-show 根据表达式的真假切换元素的display CSS属性，都能实现元素的显示隐藏，不同的是v-if是通过删除添加DOM元素的方式，v-show是通过CSS的方式，v-if有较高的切换性能消耗，v-show有较高的初始渲染消耗
所以如果元素要频繁地切换，最好用v-show，如果元素可能永远都不会被显示出来给用户看，则推荐用v-if
<input type="button" @click="flag = !flag">
<h3 v-if="flag">v-if控制的h3</h3>
<h3 v-show="flag">v-show控制的h3</h3>
Vue操作样式
Vue中使用class样式，由于class也是标签属性，所以要用v-bind指令来绑定数据
<!--原生写法-->
<h1 class="red thin"> </h1>
<!--传递一个数组，里面是类样式名-->
<h1 :class="[‘thin‘, ‘italic‘]"> </h1>
<!--在数组中使用三元表达式,flag为data中定义的布尔类型属性-->
<h1 :class="[‘thin‘, ‘italic‘, flag?‘active‘:‘‘]"> </h1>
<!--在数组中使用对象来代替三元表达式，提高代码的可读性-->
<h1 :class="[‘thin‘, ‘italic‘, {‘active‘:flag} ]"> </h1>
<!--直接使用对象，键为类样式名，值为布尔，表示是否应用这个样式-->
<h1 :class="{red:true,italic:true,thin:true,active:true}"> </h1>
Vue中使用内联样式，类似jq的css方法，里面传入对象
<h1 :style="{‘color‘:‘red‘,‘font-size‘:‘16px‘}"></h1>
也可将对象定义到data中，再在标签里写对象的引用
文字跑马灯小案例
<div id="app">
<input type="button" value="浪起来" v-on:click="start">
<input type="button" value="淡定" v-on:click="stop">
<p>{{msg}}</p>
</div>
<script>
//VM实例中获取data的数据或者调用methods里的方法,必须通过this来访问
var vm = new Vue({
el: ‘#app‘,
data: {
msg: ‘划船不用桨全靠浪~~~‘,
timeId:null //定时器id
},
methods: { //这个methods属性中定义了当前Vue实例所有可用的方法
start: function () {
if(this.timeId != null) return //使用节流阀防止定时器多次开启
this.timeId = setInterval(() => {
var start = this.msg.substring(0, 1) //截取第一个字符
var end = this.msg.substring(1) //截取剩下的字符
this.msg = end.concat(start)
}, 500)
},
stop: function () {
clearInterval(this.timeId)
this.timeId = null
}
}
})
</script>
也可以使用启动前先清除定时器的方式来防止定时器多次开启，不过感觉这种方式相比下应该是比较耗性能的
定时器里的this指向的是window，但用了ES6的箭头函数，this指向仍是vm实例对象
实例化后window里会有vm实例对象，底层会把data里的属性挂载到vm实例对象上作为vm的属性，所以可以直接通this点来获取
标签：最好 浏览器 选择 -o 框架 bubuko 提高 自己 bst
原文地址：https://www.cnblogs.com/Grani/p/9617531.html
