VUE写点入门的(1)
1,Vue与JQ的区别(数据驱动和DOM驱动)
基于DOM驱动,简单来说就是直接通过代码操作页面上的html元素。
举例:<div id="demo">text<div>
要是利用DOM驱动改变div里的值
JS
var demoDiv = document.getElementById('demo')//获取对应DOM节点
contentDiv.innerHtml = 'helloword'//操作DOM
JQ
$('#demo').text('helloword')
//依然是获取DOM,操作DOM的方式来改变对应的数据。
那么基于数据驱动 比方说Vue在开发中就有显著优势。
<div id="demo"> {{text}}<div>
<script>
new Vue({
el:'#demo',//绑定对应的节点
data() {
return {
text:'helloworld'//将数据渲染到对应节点
}
},
})
</script>
这么简单的来看还是先绑定节点,再操作节点,但实际运用中我们可以直接更改text中的值来改变对应节点的数据。但是JS和JQ只能操作对应DOM,用代码来改变值。
比如如果我们要将div中的text变成 hellovue
在数据驱动中我们只需要在data中操作即可
但是要在JS和JQ中要另写或者更改代码来实现。
$('#demo').text('hellovue ')
demoDiv.innerHtml = 'hellovue '
2,v-model如何实现双向绑定。
v-model这个指令可以体现vue数据驱动。
v-model实现了数据的双向绑定,那么什么是双向绑定呢,就是不仅data中的数据会渲染到页面上,节点中的数据改变会改变data中的数据。
那v-model是怎么实现的呢,
用input元素举例。
v-model可以拆分为v-bind绑定数据和v-on input提交表单数据两步。
即为
<div id="app">
<input v-model='text' >
</div>
<div id="app">
<input v-bind:value='text' v-on:input="text = $event.target.value" >
</div>
基于 v-model我们可以做一个小东西方便理解数据的双向绑定。
<input v-model.number='Num_a' >+ <input v-model.number='Num_b' >=<div>{{Num_b+Num_a}}</div>
//这样我们就可以得到一个值的加法计算
我们也可以利用computed来监听数据变化
<input v-model.number='Num_a' >+ <input v-model.number='Num_b' >=<div>{{sum}}</div>
computed: {
sum:function(){
return this.Num_a+this.Num_b
}
},
3,v-for 模版引擎循环渲染
v-for指令就是将对应数组内容便利循环渲染到页面
首先在data里定义个数组
data() {
return {
Num_a:0,
Num_b:0,
list:['vue','react','Angular']
}
},
然后进行循环渲染
<div v-for='(item,i) in list'>{{i}}---{{item}}</div>
这样就能得到数组里每一个值(item)和每一个下标(i)并将它按序渲染到页面
甚至我们可以去遍历一个数字
<div v-for='(item,i) in 3'>{{i}}---{{item}}</div>
这时我们得到的item是123 得到的i是012.
3,v-on:事件绑定。
简单的写一点东西,帮助理解数据双向绑定。
<input type="text" v-model='name'>
<button v-on:click='add'>添加</button>
methods: {
add(){
console.log(this.name)
this.list.push(this.name)
}
},
这样我们就能通过input点击事件改变data数据从而改变渲染。