Vue简介
Vue是数据驱动组件，为现代化的Web页面而生，与ReactJS的中心思想一样，都是一切皆是组件。他是MVVM模式的框架，这点又与AngularJS是一样的
特点
<li>简洁：HTML模板 + JSON数据 + Vue实例</li>
<li>数据驱动：自动追踪依赖的模板表达式和机选属性</li>
<li>组件化：用可解耦、可复用的组件来构造世界</li>
<li>轻量：~24kb min + zip，而且无依赖</li>
<li>快速：精确有效的异步批量DOM更新</li>
<li>模块友好：通过NPM或Bower安装，无缝融入你的工作流</li>
兼容性
Vue.js不支持IE8以下版本，Vue.js使用了IE8不支持的ECMAScript5特性
入门使用，简单的Demo
以下是本人通过本地vue.js学习的，因为服务器上面运行慢，不利用学习使用，所以以下的Demo全部在本地实现。
首先要引入vue.js文件，在网上请求文件亦可。
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
1.首先我们做一下最简单的Demo--Hello world
html代码
<div id="app">
<p>{{message}}</p>
</div>
这里我需要解释一下：p标签之间的双大括号是Mustache语法，与AngularJS使用规则一样。内部不仅可以写变量也可以写一些表达式，如：1 + 2 ，Math.random()>0.5等等
js代码
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
}
});
这里我也需要强调一下，
- vm其实就是view model的缩写 ，我们这里用vm来命名
- el对应的是跟标签，这里的跟标签并不是html元素标签，而是我们所对应的元素 <code> <div id='app'></div> </code>
- data对应的是数据，而这里data作为vueJS的内部实例数据对象，所以我们这里不需要通过data这个对象来调用数据
而是直接用其内部属性名调用即可
2.接下来我要介绍一下vueJS中的绑定
一种是属性绑定，通过v-bind来实现 。另一种是事件绑定，通过v-on来实现。而：是v-bind的缩写，@是v-on的缩写
html代码
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
<div id="app-3">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
js代码
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date()
}
})
var app3 = new Vue({
el: '#app-3',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
这里面methods是对应函数，后续我们给大家详细讲解
3.接下来我们看一下vueJS的语法糖 --v-model双向绑定
<div id="app-4">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-4',
data: {
message: 'Hello Vue!'
}
})
其实这个完全可以用v-bind与v-on来实现
4.我们看一下vueJS是如何用for来渲染页面的
<div id="app-5">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-5',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
5.最后我们看一下，vue中的组件是如何运用的
html代码
<div id="app-7">
<ol>
<!-- Now we provide each todo-item with the todo object -->
<!-- it's representing, so that its content can be dynamic -->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
js代码
// 用组建构建应用
// 在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例：
// Define a new component called todo-item
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
]
}
})
是不是非常的简单啊？这也就是我们vueJS基础的全部内容了，接下来我要给大家介绍一下vueJS的常用指令
- v-if 根据表达式的值来渲染元素
- v-else 与v-if是相对的，但是v-else必须配合v-if或者v-if-else来使用，不然系统是解析不了的
- v-show 根据表达式的值得真假切换display，实现隐藏
这里我不得不对 v-if以及v-show做一下对比了：
v-if实现切换隐藏是对DOM的彻底销毁或重建，而v-show是切换的display属性，
也就是说，v-if在条件为假时是不会对DOM进行渲染的，而v-show是始终会对DOM进行着渲染。
直白一点：v-if的初始DOM渲染损耗要低于v-show，而切换损耗要高于v-show
- v-for基于源数据或模板重复次数
语法：v-for=“item in items” v-for=“item of items”
这里使用for-in与for-of均可。
v-for扩展
v-for=“(item,index) of items” 当遍历数组时，这里的item是元素index是数组的下标
v-for=“(value,key) of object” 当遍历对象的时候，第一个参数是对象中的value，第二个参数是key
v-for=“num of 10” 当遍历的是数字的时候，num是从1-10的数字
v-bind绑定
v-bind绑定也就是属性绑定，这在上文中已经提到了
让我们看一下它的语法：
- v-bind:src='./vue.js' //简写： :src='./vue.js'
:class='{red:isRed}' //绑定class
:class='{classA,classB}' //可以绑定多个class
:style='{fontSize:size + "px"}' //绑定style
v-bind='{id:someProp,"other-attr":"other-value"}' //可以绑定多个属性
v-model在表单上创建双向绑定
最后我们来详细介绍一下Vue实例吧
Vue实例中的选项
- 1.data----Vue实例数据对象，这个在上文中已经讲到，这里就不细说了
- 2.methods----Vue实例的方法，实例可以直接访问这些方法，方法中的this自动绑定到实例
- 3.computed----实例计算属性，1.同样也是属性，对应的不是值，而不是函数。2.getter和setter的this自动绑定到实例
实例计算属性的栗子
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
},
})
console.log(vm.reversedMessage);
vm.message = 'luoxue';
console.log(vm.reversedMessage);
</script>
实例属性
- vm.$data--------Vue实例观察的数据对象
- vm.$el----------Vue实例挂在的元素
- vm.$parent
- vm.$root
- vm.$children
实例方法vm.$watch
观察Vue实例的一个表达式或计算函数
语法：
vm.$watch('msg',function(newValue,oldValue){
console.log(newValue,oldValue);
});
vm.$unwatch返回一个取消观察函数，用来停止触发回调
var unwatch = vm.$watch('a',cb);
unwatch();
关于计算属性与watch方法的对比Demo
<div id="demo">
<p>{{ fullName }}</p>
<input v-model="firstName">
<input v-model="lastName">
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
// 上面代码是命令式的和重复的。跟计算属性对比：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
这里我们不难看出：使用计算属性方法要比，watch方法简单的多。但是有些时候计算属性并不能解决我们遇到的问题，使用watch方法也是一个不错的选择。
Vue实例之生命周期
Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染更新、渲染卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到
销毁的过程，就叫做生命周期。
- created--------创建完成
- mounted---------加载完成
- updatad----------更新完成
- destroyed---------已经释放
上面我已经说了，VueJS的中心思想是一切皆是组件，下篇我会针对VueJS中的组件进行详解。
