下面是我这半年以来总结的Vue进修笔记，协助本身温习进修Vue的基础用法。有须要的同道能够参考下。

Vue的模板语法

Vue有很简朴的模板语法,这些Vue指令用来相应式转变衬着DOM能够疾速入门上手这个简朴的框架。

1.{{}}单向插值表达式，能够把数据从控制器绑定到视图模子

var my = new Vue({
    el: '#app',
   ,
    template: `<div>{{myName}}
           
                   `,
    data() {
        return {         
           myName: 'hello vue!',

        }

    },

})

data选项就代表着控制器中的数据信息。

2.属性绑定 v-bind: 缩写为:

           template:`
            <div v-bind:title="myName">hover here
            </div>`

3.v-if与v-show
二者背面都是跟boolean范例变量，v-if会直接在dom构造移除该dom元素，v-show只是加了一个行内款式dislplay:none;该元素照样存在的。
在data属性中声明初始化须要的变量后在模板中衬着。

  data() {
        return {
     
            myName: 'hello vue!',
           
            isShow: false,
           

        }

    },

 `<div v-if="isShow" >show me </div>
            <hr>
  <span v-show="isShow">show me</span>`

4.v-for=”item in arrOrObject”轮回某个DOM.被轮回的数据能够是对象也能够是数组item 也能够写作(item ,index)如许就会把对象中的key或许数组中的索引index取出来
注重模板必需只能包括一个根节点

template：<div></div><div></div>//写法毛病

<ul>
            <li v-for="item in arr">loop {{item}}</li>
            </ul>

5.事宜绑定v-on缩写@ 在methods:{}定义要领
然后就能够在模板中挪用

   methods: {
      
        reverse() {
            //console.log(this.message)
            this.message = this.message.split(' ').reverse().join(' ')
        }
    },

 <button v-on:click="reverse">音讯逆转</button>
            <p>{{message}}</p>

6.表单双向绑定

• 我们能够采纳事宜绑定的体式格局间接完成。即定义表单中的keyup事宜回调要领，然后在要领中获取到value值，然后赋值给data上的数据

• 还能够采纳v-model快速完成要领

 <input type="text" v-model="input">

这本质上就是上一种要领的语法糖。

7.Vue类的data属性必需定义一个函数然后返回一个对象，假如直接运用对象关于数组等的援用赋值就会使得转变了数据值会影响别的处所对它的援用。定义成一个函数返回如许就是把一切的数据复制了一份，不会发生援用赋值的伤害。

 data() {
        return {
            message: "this is a boy",
            myName: 'hello vue!',
            time: new Date(),
            isShow: false,
            input: 'liyu',
            arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],

        }

    },

8.全局子组件的注册与属性通报

Vue.component('child', {
    props: ['title'],
    template: `<div> <hr>
        <h3>{{title}}</h3>
        <p>我是个全局子组件</p>
    </div>`
})

• 用props:[' ']这类数据格式来定义接收的属性称号
  如许在挪用child时刻就能够通报属性进去

<child :title="input"/>
           

本日的笔记进修心得就记录到这里吧！第一次用SegmentFault顺遂！