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的单文件组件;

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值