Vue学习心得记录之模板语法

下面是我这半年以来总结的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顺利！