Vue.js核心特性精讲-优快云博客

关于Vue的基本特性，详细介绍可以参照菜鸟教程的说明。

1.计算属性

关键函数：computed & methods

计算属性用于处理一些复杂的逻辑，举例--字符串的反转--说明：

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>computed 计算后反转字符串: {{ reversedMessage1 }}</p>
  <p>methods 计算后反转字符串: {{ reversedMessage2() }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage1: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods : {
    reversedMessage2: function () {
        return this.message.split('').reverse().join('')
    }
  }
})
</script>

这里声明了一个属性 reversedMessage的属性，个人认为还是称之为函数的好。Vue强制要求的数据单向流绑定，data中的message属性发生变化，<p>标签的内容也会随之变化。

computed: 依赖于缓存，只有相关的依赖发生变化的时候才会重新渲染，避免函数的重复调用。

methods：作用与computed形同，不会依赖缓存，每次都会重新渲染，调用时记得加“()”，reversedMessage2()。

2.监听属性

关键属性: watch & v-model

通过watch属性来响应数据的变化，v-model 来及进行数据的双向绑定。个人理解，没有必要在js里面写watch的部分进行监听，除非你想详细的了解数据的变化过程。

3.样式绑定

关键指令: v-bind: v-bind:class; v-bind:style

关于样式的绑定具体实现可以参照：菜鸟教程的vue绑定样式总结

var myvue = new Vue({
  el:'#mydiv',
  data:{
    gettext: '',
    getclass1:true,
    getclass2:false,
    getp_style:true,
    // 这里的key是类名，value是boolean值。下面的vue+class的value才是类名，key是自定义的类的实例化对象。注意区分
    styleobj:{
      class1: true,
      class2: true,
      'p-style': false  // 这里也需要将带有连字符的样式用引号括起来
    },
    getdiv_style:{  // 定义样式调用条件
      number1: true,
      number2: false
    },
    // 下面几个其实可以理解为 伪类实例化
    vueclass1: 'class1',
    vueclass2: 'class2',
    vuedivstyle: 'div-style',
    vuepstyle: 'p-style',
    // 动态改变字体大小
    size: 15,
    fontstyle:{ // 绑定样式对象
      fontSize: 25+'px',
      fontWeight: 'bold'
    },
    colors: ['red','blue','cyan','pink','orange','yellow','black','white','purple'],  // 动态改变颜色需要的颜色数组
    colorstyle: {
      color: 'red',
      backgroundColor : 'blue',
      borderRadius: '20px'
    },
    sizestyle:{
      width: '300px',
      height: '100px'
    },
    radiussize: 10
  },
  watch:{
    size:function(){
      this.fontstyle.fontSize = this.size+'px'
    },
    gettext:function(str){  // 适用于只要填入内容就改变样式
      str ? this.getdiv_style.number1 = false : this.getdiv_style.number1 = true
    }
  },
  methods:{
    changecolor:function(){ // 改变颜色
      this.colorstyle.backgroundColor = this.colors[Math.floor(Math.random()*this.colors.length)]
      this.colorstyle.color = this.colors[Math.floor(Math.random()*this.colors.length)]
    },
    changesize:function(){  // 改变尺寸
      this.sizestyle.width = parseInt(this.sizestyle.width)+50+'px'
      this.sizestyle.height = parseInt(this.sizestyle.height)+20+'px'
    }
  },
  computed:{
    judegeuse:function(){ // 判断是否使用某个/些类
      return {
        class1: false,
        class3: true,
        'div-style': this.getdiv_style.number1&&!this.getdiv_style.number2  // 这里也需要将带有连字符的样式用引号括起来
      }
    }
  }
})

4.条件渲染与循环渲染

关键指令：v-if; v-else; v-else-if; v-for

Vue为了提高渲染的性能或者效率，会复用已渲染的标签。需要注意：

在使用<input>标签时，建议添加key属性以区别元素

<div class="" v-if="isSeen">
  <input type="text" name="" value="" placeholder="enter a" key="a">
</div>
<div class="" v-else>
  <input type="text" name="" value="" placeholder="enter b" key="b">
</div>
<div class="" @click="isSeen=!isSeen">
  toggle
</div>

v-for的优先级高于v-if，需要全部渲染时，v-if在外层

<div v-if="{{a}}"><div v-for="item in list"></div></div>

5.事件绑定

关键指令： v-on，简写为@；例如v-on：click 等价于 @click，例子如上述代码。

关于Vue组件的特性--总结深化：

1.指令 -- 用来操作DOM

2.组件 -- html css js的聚合体

为什么要使用组件：

组件化思想：将项目中的一部分，复用于多处；加快项目进程；项目的复用性；
组件化条件：组件化的部分必须是一个完整的，称之为组件；
聚合体：index.htm css js等文件分开的话，复用会相当麻烦；将这些部分放在一起形成单文件组件 ***.vue；
注册方法：全局注册&局部注册，作用域类似于全局变量与局部变量的关系；

 Vue.components('组件名'，{

 template:'内容'

 })

 //局部注册:在组件中用components的配置项目来表示（只能在注册范围内用）

 new Vue({

 el:'#app',

 components:{内容}

 })

自定义全局组件：所有实例中均可使用

<div id="app">
	<runoob></runoob>
</div>

<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

自定义局部组件：仅在实例选项中使用

<div id="app">
	<runoob></runoob>
</div>

<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}

// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})