VUE学习个人纪录02（模板语法与数值绑定）

模板语法

插值语法

功能:用于解析标签体内容。
写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

 

<div class="root">
        <h1>插值语法</h1>
        <h3>hello,{{name}}</h3>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '.root',
            data: {
                name: 'input your name '
            }

        })
    </script>

 

指令语法

 

功能:用于解析标签（包括:标签属性、标签体内容、绑定事件.....) 。

举例: v-bind:href="xxx” 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

备注:Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。

 <h1>指令语法</h1>
        <a v-bind:href="url">点击前往百度</a>
        <a :href="url">点击前往百度1</a>

 <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '.root',
            data: {
                url: 'http://www.baidu.com',
            }
        })
    </script>

数据绑定

Vue中有2种效据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面-
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。

备注:
1.双向绑定一般都应用在表单类元素上(如: input、 select等)
2.v-model :value 可以简写为v-model，因为v-model默认收集的就是value值。

 

<div class="root">
        单向数据绑定：<input type="text" :value="name">
        <br> 双向数据绑定：<input type="text" v-model="name">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '.root',
            data: {
                name: 'aaa'
            }
        })
    </script>

el与data的两种简写方法（组件相关内容）

 

data、el的2种写法
1.el有2种写法
　　（1）. new Vue时候配置el属性。

 new Vue({ el: '.root', data: { name: 'name here' } }) 
　　（2）. 先创建vue实例,随后再通过vm.$mount( " #root ')指定el的值。

 v.$mount('#root') 
2.data有2种写法
（1）对象式

 new Vue({
            el: '.root',
             //data的第一种写法:对象式
             data: {
                 name: 'name'
             }

 

（2）函数式

 data: function() {
                return {
                    name: 'name'
                }
            }

如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式。否则会报错。
3.一个重要的原则:
　　由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。