vue.js
一套用于构建用户界面的渐进式框架。
官方教程：https://cn.vuejs.org/v2/guide/
在线编辑：https://codepen.io/pen
此博统计各种语法，为了方便阅读只有简短代码，而且需要详细学习的话还是建议直接在官网的教程上走一遍~其实很简单。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
先介绍一下基础语法，作为铺垫
声明式渲染
v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。
<div id='div1'>
<span v-bind:title="titleContent">鼠标悬停查看title</span>
{
{ name }}
</div>
var vueObj = new Vue({
el:"#div1",
data:{
name:"飞机",
titleContent:"这里是Vue实例中动态的内容。"
}
})
页面效果：
条件与循环
<div id="div1">
<ol v-if="flag">
<li v-for="entity in entitys">
{
{entity.id}}--{
{entity.name}}
</li>
</ol>
</div>
var div1 = new Vue({
el:'#div1',
data:{
flag:true,
entitys:[
{id:5234524,name:'三笠' },
{id:2345241,name:'艾伦' },
{id:2345345,name:'利维' },
{id:3243435,name:'艾尔敏' }
]
}
})
页面效果：
在 Vue 插入/更新/移除元素时自动应用过渡效果。
处理用户输入
v-on 指令添加一个事件监听器
<div id="div1">
<p>{
{mess}}</p>
<button v-on:click="reverseStr">反转字符串</button>
<p>{
{inputData}}</p>
<input v-model="inputData">
</div>
var div1 = new Vue({
el:'#div1',
data:{
mess:'进击的巨人1',
inputData:''
},
methods:{
reverseStr:function(){
this.mess = this.mess.split('').reverse().join('')
}
}
})
页面效果：
组件化应用构建
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
<div id="div1">
<ol>
<comp-li
v-for="valItem valList"
v-bind:comp="valItem.val"
></comp-li>
</ol>
</div>
Vue.component('comp-li',{
props: ['comp'],
template: '<li >{
{ comp }}</li>'
})
var div1 = new Vue({
el:'#div1',
data:{
valList:[
{id:'0',val:'吃饭'},
{id:'1',val:'喝水'},
{id:'2',val:'睡觉'}
]
}
})
这里就有必要解释一下了，component 关键字是声明组件，其中的props，可以看到对应标签元素上的 v-bind:comp ，当 v-bind:comp=“valItem” 时，props:comp 拿到的就是整个 valItem {id:‘0’,val:‘吃饭’} 。
Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始
Vue中的数据都具有“响应”性，当属性的值发生改变，视图层也会随之改变，但是这些值必须是在声明Vue实例的时候就存在。
引用官方的解释：
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
可是如果设置 data.b = 1 视图不会有任何变化，所以在实际开发时，稍后赋值的属性需要提前声明。
另外，如果想要拒绝这种响应的情况，有个特殊的函数：Object.freeze()，阻止Vue追踪数据
<div id="div1">
<p>{
{ address }}</p>
<button v-on:click="address = 'guangzhou' ">Change it</button>
</div>
var obj = {
address: 'guangdong'
}
Object.freeze(obj)
new Vue({
el: '#div1',
data: obj
})
这里点击后 console会打印Vue error
另外，声明一个Vue实例后，也可以通过属性的方式访问Vue实例中的成员：vm.$data、 vm.$el
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
Vue声明周期
所有对象都会有他的生命周期，并且每个完整的框架都会有对应的事件回调。
举个栗子
new Vue({
el: '#div1',
data: obj,
created:function(){
console.log('艾尔敏，前面就能看到海了');
}
})
created，Vue实例加载完成后执行。官网称他们为“生命周期狗子”打错字，是钩子，其实就是生命周期的回调函数啦。
然后就是放一张Vue的生命周期图：
大致看一下就可以了，具体用到的时候再来查。
未完待续…
版权声明：文章内容总结于网络，如侵犯到原作者权益，请与我联系删除或授权事宜