什么是vue.js
- 一个构建数据驱动的web界面的库；
- Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
- Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单;
安装vue.js
-
在 Vue.js 的官网上直接下载 vue.min.js，并用
<script>引用； -
使用 CDN ：
- BootCDN（国内） : ；
- unpkg：, 会保持和 npm 发布的最新的版本一致。
- cdnjs : ；
注： 国外的版本比较稳定，国内还没发现哪一家比较好，目前还是建议下载到本地；
-
使用NPM：
npm install Vue
vue.js的属性、方法、生命周期
先看一个代码实例
window.onload=function(){ var dataList={ name: "vue", age:2 }; var commonfun={ sayHello:function(){ return 'hello,world' } }; var app = new Vue({ el:'h2', data:dataList, methods:commonfun });} -
属性：每个 Vue 实例都会代理其 data、methods、filters 对象里所有的属性，并且具有双向绑定功能：
app.name===dataList.name;//true app.age===dataList.age;//true console.log(app.sayHello());//hello,world
注： 被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新，如下代码会报错；
//.htm 文件 中
{ {title}}
//js文件中 window.onload=function(){ var dataList={ name: "vue", age:2, }; var app = new Vue({ el:'h2', data:dataList }); app.title="this is vue"; } //vue.min.js:6 ReferenceError: title is not defined -
Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $ ，以便与代理的数据属性区分；
-
var app = new Vue({ el:'#h', data:dataList }); console.log(app.$el === document.getElementById('h'));//true -
声明周期：Vue 实例在创建时有一系列初始化步骤——例如，它需要建立数据观察，编译模板，创建必要的数据绑定。在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会；
Vue数据绑定
Vue.js 的模板是基于 DOM 实现的,所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。
-
插入值
{ {value}} -
绑定表达式：表达式将在所属的 Vue 实例的作用域内计算。每个绑定只能包含单个表达式
{ { number + 1 }} { { ok ? 'YES' : 'NO' }} { { message.split('').reverse().join('') }} { { var a = 1 }} { { var a = 1 }} { { if (ok) { return message } }} -
过滤器： 管道语法不是 JavaScript 语法，因此不能在表达式内使用过滤器，只能添加到表达式的后面
{ { message | capitalize }} //过滤器可以串联 { { message | filterA | filterB }} //过滤器也可以接受参数 { { message | filterA 'arg1' arg2 }} -
指令:指令 (Directives) 是特殊的带有前缀 v- 的特性
Hello!
//有些指令可以在其名称后面带一个“参数”，中间放一个冒号隔开 //修饰符 (Modifiers) 是以半角句号开始的特殊后缀，用于表示指令应当以特殊方式绑定 -
缩写
-
Vue计算属性
在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。 如果需要多于一个表达式的逻辑，应当使用计算属性。
-
computed 属性
a = { {a}}, b = { { b }}window.onload=function(){ var vm = new Vue({ el: '#demo', data:{ a:1 }, computed:{ b: function () { return this.a + 1; }}, }); } //a=1,b=2;这里我们声明了一个计算属性 (computed) b。我们提供的函数将用作属性vm.b的getter
-
vs.$watch 属性
Vue.js提供了一个方法$watch，用于观察Vue实例上的数据变动。
{ {fullName}}更好的办法是使用计算属性而不是一个命令式的$watch回调。
{ {fullName}}window.onload=function(){ var vm = new Vue({ el: '#demo', data:{ firstName:"foo", lastName:"bar" }, computed:{ fullName:function(){ return this.firstName+" "+this.lastName; } }, }); } -
计算 setter
计算属性默认只是getter，不过在需要时也可以提供一个setter
computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName; }, // setter set: function (newValue) { var names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1]; } } }
类与样式绑定
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
-
绑定HTML Class
-
对象语法
v-bind:class 指令可以与普通的 class 特性共存; 当 isA 和 isB 变化时，class 列表将相应地更新。
直接绑定数据里的一个对象：
data: { classObject: { 'class-a': true, 'class-b': false } } -
数组语法
根据条件切换列表中的 class，可以用三元表达式
-
-
绑定内联样式
-
对象语法 v-bind:style对象语法十分直观，看着像 CSS的JavaScript 对象。CSS 属性名可以用驼峰式或短横分隔命名：
data: { activeColor: 'red', fontSize: 30 } 直接绑定到一个样式对象，让模板更清晰 data: { styleObject: { color: 'red', fontSize: '13px' } } -
数组语法
v-bind:style 的数组语法可以将多个样式对象应用到一个元素上
-
自动添加前缀
当 v-bind:style 使用需要厂商前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀
-