Vue特性的简单总结

关于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
  }
})

---

template的使用：

1.实例范围内使用

​ template中的内容被当做一个整体了，并且template标签是不会解析到html结构中；

2. 实例范围外使用

​ 实例范围外template标签是不会被直接解析，组件中想要这样使用，需要vue的单文件组件；