1.Vue简介
一、vue:是一套用于构建用户界面的渐进式框架。
二、Vue的核心特点:
(1)相应的数据变化
当数据发生改变 --> 视图自动更新
(2) 组合的视图组件
UI页面映射为组件树
划分组件可维护、可复用、可测试
三、MVC和MVVM
MVC:有model、view、controller三部分组成,其中controller是中间桥梁,能够上model和view进行数据交换。
MVVM:由model、view、viewmodel组成,viewmodel是Vue的核心。
四、Vue的初始化
<div id="app" v-cloak>{{msg}}</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'hello vue'
}
})
</script>
注意:当在页面中引入多个文件时,有可能会因为引入顺序造成页面加载出现问题。这是可以使用async和defer来实现异步。
defer是按照顺序执行,async是谁先加载完谁先执行。
五、Vue中的数据双向绑定
首先我们先用原生JS来模拟一下数据双向绑定
<!-- 原生JS模拟数据双向绑定 -->
<div id="app">
<input type="text" id="input">
<span id="sp"></span>
</div>
<script>
// ES5可以对对象的属性进行监听?
// var obj = {}
// var msg = '123'
// Object.defineProperty(obj, 'msg', {
// // value: "helloworld!!!",
// // writable: false
// get() {
// return msg;
// },
// set(val) {
// msg = val
// }
// })
// obj.msg = "112233"
// console.log(obj.msg)
var input = document.querySelector('#input')
var span = document.querySelector('#sp')
var obj = {}
Object.defineProperty(obj, 'msg', {
get() {
},
set(val) {
span.innerHTML = val
input.value=val
}
})
input.addEventListener('input', function() {
console.log("input值发生了表哈!!!")
// UI -> 使得JS中的值发生了变化?
// JS -> UI?
obj.msg = input.value;
})
</script>
通过原生JS的模拟我们可以知道所谓的数据双向绑定就是当js的值发生改变时UI的值也会发生改变,同样的UI的值发生改变时js的值也会发生改变。当我们理解这些时就会发现Vue的数据双向绑定也不过如此。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
</script>
六、指令(directive)
所谓指令,相当于标签上的自定义属性。
常见的指令有:
指令 | 含义 |
---|---|
v-text | 文本指令 |
v-model | 双向绑定指令 |
v-bind | 动态绑定属性 |
v-once | 只执行一次 |
v-HTML | HTML代码解析 |
v-cloak | 当Vue解析完,渲染div |
v-on | 绑定事件或监听事件 |
v-for | 循环指令 |
注意:其中v-on和v-bind指令可以进行简写
v-on === @
v-bind === :
代码示例
<div id="app">
<span v-text="msg"></span>
<img v-bind:src="url" alt="">
<p v-html="p"></p>
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
<button v-on:click="alert('123')">点击</button>
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"下一个天亮",
url:"http://img3m3.ddimg.cn/84/36/27879573-1_l_6.jpg",
p:"<p>此时此刻的云</p>",
arr:["星期一","星期二","星期三"]
}
})
</script>
七、todoList案例
<div id="app">
<input type="text" @keyUp.enter="addTodo" v-model="inputValue">添加
<ul>
<li v-for="(item,index) in arr">{{item}} <button @click="delTodo(index)">删除</button></li>
</ul>
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
inputValue: "",
arr: []
},
methods: {
addTodo() {
if(this.inputValue.trim() === ""){
return
}
this.arr.push(this.inputValue)
this.inputValue = ""
},
delTodo(index) {
this.arr.splice(index, 1)
}
},
})
</script>