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

Object.freeze(obj)

另外，声明一个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的生命周期图：

Vue的生命周期

大致看一下就可以了，具体用到的时候再来查。

未完待续...
版权声明：文章内容总结于网络，如侵犯到原作者权益，请与我联系删除或授权事宜