Vue.js是JavaScript的MVVM(Model-View-ViewModel)框架,像这样的框架还有AngularJs,为什么叫MVVM框架,因为数据和模型任意一方改变,另一方也随之改变。是同步的。Vue的核心只关注视图层。
MVVM模式即Model-View-ViewModel。
Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦绑定,视图和数据就保持同步。每当数据发生改变,视图也发生改变。反之亦然。
ViewModel是Vue的核心,它是Vue的一个实例。Vue实例作用某个HTML上元素上,这个HTML可以是body,也可以是某个id所指的元素。
DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听视图层中DOM的变化,当发生变化时,Model层的数据随之改变。DOM DataBindings监听Model层的数据,当数据发生改变时,View层的DOM也随之改变。这也是数据双向绑定的特点。
Vue.js特点:
- 简洁:页面由HTML + JSON + Vue实例组成
- 数据驱动: 自动计算属性和追踪依赖的模板表达式
- 组件化: 可复用 解耦的组件来构建页面
- 轻量: 代码量小,不依赖其他库
- 快速: 精确有效批量DOM更新
- 模板友好: 可通过npm,bower等多种方法安装,很容易融入。
声明式的渲染
Vue.js核心是一个允许采用简洁的模板语法来声明式的将数据渲染到DOM:
问题:
1.简洁的模板是?
就是下面html部分
2.什么是声明式的?
声明式就是声明一个变量
html
<div id="app">
{{message}}
</div>
js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue'
}
})
输出结果为:
Hello Vue
我们已经生成第一个Vue应用了,看起来跟单单渲染一个字符串模板非常类似,但是Vue在背后做了大量工作。现在数据和DOM已经绑在一起,所有的元素都是响应式的。我们如何知道,打开你的浏览器的控制台,并修改app.message,你将看到上例相应的更新。
这里存在一个问题:
为什么会这样写:
app.message = '好消息'
而不是这样:
app.data.message
{{ message }} 使用了"Mustache"语法(双大括号)
除了插文本的形式,我们还可以采用这样的方式绑定DOM元素属性:
html:
<div id="app">
<span v-bind:title="message">鼠标停留几秒钟可以查看到提示信息</span>
</div>
js:
var app = new Vue({
el: '#app',
data: {
message: '加载于' + new Date()
}
})
v-bind 属性被称为指令。
v-*代表的是Vue提供的特殊属性,v-bind此指令的作用是:将这个元素节点上的title属性和Vue实例中的message属性保持一致。
条件与循环
v-if 控制切换一个元素的显示
html
<div id="#app" v-if="seen">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: '好消息',
seen: true
}
})
输出结果为:
好消息
这个例子演示了我们不仅可以绑定DOM文本到数据,还可以绑定DOM结构到数据。
不太懂什么意思?
v-for 可以绑定一个数组的数据来渲染到列表中
html
<div id="app">
<ul>
<li v-for="item in arr">
{{ item.text }}
</li>
</ul>
</div>
js
var app = new Vue({
el: '#app',
data: {
arr: [
{ text: '天下' },
{ text: '天下的宝宝' },
{ text: '宝宝的天下' }
]
}
})
在控制台里,输入
app.arr.push({ name: '宝贝' })
你会发现列表中新增了一项
处理用户输入
为了让用户和你的应用进行互动,我们可以用 v-on 指令绑定一个事件监听器,通过它调用我们Vue实例中定义的方法:
html
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reveserMessage">逆转消息</button>
</div>
js
var app = new Vue({
el: "#app",
data: {
message: 'Hello World!'
},
methods: {
reveserMessage: function(){
this.message = this.message.split('').reveser().join('');
}
}
})
问题:
1.this指的是什么
指的是vue实例。
Vue$3 {_uid: 0, _isVue: true, $options: Object, _renderProxy: Proxy, _self: Vue$3…}
2.split()是分割字符串,那么join()是什么呢?
join()方法用于把数组中所有元素放入一个字符串中。元素是通过指定的字符串分割的。
前者是字符串的方法,后者是数组的方法。
<script type="text/javascript">
var arr = 'I love you';
console.log(arr.split('')); //["I"," ","l","o","v","e","y","o","u"]
console.log(arr.split('').join()); //I,l,o,v,e,y,o,u
console.log(arr.split('').join('')); //I love you
</script>
join(separator)可选 指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。