vue

官网：https://cn.vuejs.org/v2/guide/installation.html

开发前准备

下载

1、官网下载

或者：

概念

• MVVM:Model View ViewModel
  
  
• 响应式绑定数据：
  数据绑定后，数据更新会同步更新对应html属性。
  Object.freeze(data);可阻止修改现有的属性，也意味着响应系统无法再追踪变化。

$

Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来

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` 改变后调用
})

语法

生命周期

new Vue():

• beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
• created 在实例创建完成后被立即调用。
  在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
  然而，挂载阶段还没开始，$el 属性目前不可见。
• beforeMount 在挂载开始之前被调用：相关的渲染函数首次被调用
• mounted el 被新创建的 vm.$el 替换, 挂在成功
• beforeUpdate 数据更新前调用
• updated 组件 DOM 已经更新, 组件更新完毕
• beforeDestroy 销毁前
• destroyed 销毁后
  

插值：

mustache语法(双大括号)

{{变量或者简单的表达式}}

<div id="app">{{message}}
<h2>{{message+' '+1}}</h2>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "3天学完vue",
    }
  });
</script>

v-once

数据绑定后，html属性不会随数据更新而更新。

<h2 v-once>{{message}}</h2>

Object.freeze(data);也可阻止更新html属性，也意味着响应系统无法再追踪变化。

v-html

将对数据解析成html节点

<h2 v-html="url"></h2>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      url: '<a href="http://www.baidu.com">百度一下</a>',
    }
  });
</script>

解析后:

<h2><a href="http://www.baidu.com">百度一下</a></h2>

v-text

<h4 v-text="message"></h4>

等价于

<h2>{{message}}</h2>

但{{}}用的更多，因为更灵活

v-pre

不解析节点的mustache

<h4 v-pre>{{message}}</h4>

会把{{message}}作为文本渲染

v-cloak

加载vue代码前存在，加载后不存在。当网页卡顿vue代码未加载前，页面可能会显示没有被vue处理的内容。使用v-cloak可解决这一问题

<style>
	[v-cloak]{display: none;}
</style>
<h4 v-cloak>{{message}}</h4>

v-bind

<div id="bind">
  <h2>v-bind:</h2>
  <img v-bind:src="imgSrc"/>
</div>
<script>
  const bind = new Vue({
    el:"#bind",
    data:{
      imgSrc:"file:///D:/project/vueTest1/static/img/cat.png"
    }
  });
</script>

• 语法糖写法

<img :src="imgSrc"/>	

 <h4 :class="{类名:布尔值,类名:布尔值}"></h4>

<h4 :class="getClasses()"></h4>
methods:{
  getClasses:function(){
    return "";
  }
},

<h4 :class="['类1','类2']"></h4>
<h4 :class="[类1(变量名),类2]"></h4>

v-for

<div id="list">
 v-for:
 <ul>
   <li v-for="(point,key) in pointList">
     {{point}}
   </li>
 </ul>

</div>
<script>
 const list = new Vue({
   el: '#list',
   data: {
     pointList: ['列表', '画画玩家可'],
   }
 });
 list.pointList.push("还哈");
</script>

• 实例：点击列表的item，item变色，其他item颜色恢复

<style>
  .red {
    color: red;
  }
</style>
<div id="list">
  v-for:
  <ul>
    <li v-for="(point, i) in pointList" @click="changeColor(i)" 
    :style="{color:i===clickIndex?'#FF0000':''}">
     <!-- :class="[i===clickIndex?'red':'']"> -->
     <!-- :class="{red:i===clickIndex}"> -->
      {{point}}{{i}}
    </li>
  </ul>
</div>
<script>
  const list = new Vue({
    el: '#list',
    data: {
      pointList: ['列表', '画画玩家可'],
      clickIndex:-1,
    },
    methods:{
      changeColor:function(i){ 
        this.clickIndex=i;
      }
    }
  });
  list.pointList.push("还哈");
</script>

上面是三种实现方式
注意，在changeColor中使用clickIndex需要加this.

computed

<div id="computed">
  computed:
  <h4>{{fullName}}</h4>
  <h4>{{fullName1}}</h4>
</div>
<script>
  const computed = new Vue({
    el:'#computed',
    data:{
      firstName:'陈',
      lastName:'志源'
    },
    computed:{
      fullName:function(){
        return this.firstName+this.lastName;
      },
      fullName1:{
        set:function(){
          
        },
        get:function(){
          return "黑河:"+this.firstName+this.lastName;
        }
      }
    }
  });
</script>

一般set方法可省略。

 fullName:function(){
  return this.firstName+this.lastName;
  }

是

fullName1:{
    get:function(){
      return "黑河:"+this.firstName+this.lastName;
    }
  }
}

的省略写法