什么是vue？
渐进式JavaScript框架
特点:
- 具有较小侵入式，在现有框架下不改动，较小改动就可使用vue.js
- 较强的弹性，可只使用一部，也可以根据项目的变化使用CLI构建工具，router，Vuex等
为什么使用vue？
- Jquery 是面对DOM编程思想
- Vue 是面向数据编程思想
Vue如何驱动数据: MVVM设计模式
view viewModel model （见例子-1）
- view: 视图层，用于展示页面数据
- model: 数据模型
- viewModel：中间层，监听数据变化，修改model，通过viewModel传给视图层
- viewModel是vue的一个实例
例子-1
<!--已经引入vue.js-->
<div id="app">{{message}}</div>
<script>
var model = {
message: 'hello world'
}
var vm = new Vue({
el: '#app',
data: model
})
</script>
数据绑定
- 方式1 "双括号（{{}}）"
<div id="app">{{ message }}</div>
<script>
new Vue({
el: 'app',
data: {
message: '数据绑定'
}
})
</script>
- 方式 2 "v-text"，与方式1 类似
- 方式 3 "v-html", 可以插入dom节点，但是容易受到xss攻击
xss攻击 xss漏洞，对文本进行转义（escapeHTML(value)）修复漏洞，解析后这个value不会被浏览器解析
属性绑定
这里会用到指令 "v-bind" 简写 ":"
<div id="app">
<a :href="url"></a>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'https://baidu.com'
}
})
</script>
方法绑定
这里会用到指令 "v-on" 简写 "@"
<div id="app">
<a :href="url" @click="handleTest"></a>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'https://baidu.com'
},
methods: {
handleTest: function () {
alert('hello world!')
}
}
})
</script>
计算属性 computed
涉及到computed就不得不提methods,watch的区别
一个浏览器地址，有协议头 + '//' + 主机名构成
// computed
<div id="#app">
<a :href="url">{{url}}</a>
</div>
<script>
new Vue({
el: '#app',
data: {
portocal: 'http:',
host: 'www.baidu.com'
},
computed: {
url: function() {
return this.portocal + '//' + this.host
}
}
})
</script>
// methods
<div id="app">
<a :href="getUrl()">{{getUrl()}}</a>
</div>
<!--已经引入vue.js-->
<script>
new Vue({
el: '#app',
data: {
portocal: 'http:',
host: 'www.baidu.com'
},
methods: {
getUrl: function () {
console.log('getUrl~')
return this.portocal + '//' + this.host
}
}
})
</script>
计算属性和方法的区别
- 计算属性在依赖不变的情况下会缓存数据结果，使用缓存结果展示，方法则是调用几次执行几次
- computed有get，set设置依赖
侦听器watch，监听vue属性变化
immediate,deep
immediate：表示初始化是否立即，true为立即执行，默认false不执行
deep：是否深层监听
// 省略部分代码...
new Vue({
el: '#app',
data: {
url: [
{
portotal: 'http:',
host: 'www.baidu.com'
},
{
portotal: 'udp:',
host: 'www.baidu.com'
}
]
},
watch: {
url: {
immediate: true,
handler: function (newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}
})
watch 另一种写法
var unwatch = this.$watch('',function(newValue, oldValue){
},
deep:true,
immediate: true
)
返回一个回调函数，用于销毁监听
