Vue

Vue模板语法

1.Vue.js模板语法
模板语法指的是如何将数据放入html中，Vue.js使用了基于 HTML的模板语法，允许开发者声明式地将DOM绑定至底层 Vue 实例的数据。所有 Vue.js的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

2.插入值
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

: 页面中获取data数据的值
v-bind:属性A: 给标签的属性设置值
属性A指的是该标签的固定属性,比如class, id,或者href等
v-if: 表示分支语句
v-if = ‘条件’, 后面跟的是条件,条件成立显示否则不显示
v-for: 表示循环语句
v-for=‘变量 in 容器’ : 依次遍历容器中的内容
v-on:click: 表示绑定点击事件
v-on:事件 :绑定的是该标签的事件,比如,点击事件,鼠标事件
3.语法代码展示

script部分:

html部分:

{{msg}}

<!-- 案例标签2 -->
<div id="app-2">
    <!-- 页面悬停几秒中之后展示message中的信息 -->
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>

<script>
//案例2对应vue文件内容
        var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
</script>
<hr>

<!-- 案例标签3 -->
<div id="app-3">
        <p v-if="seen">现在你看到我了</p>
</div>

<script>
    //案例3对应的vue文件内容
    var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true
        }
    })
</script>
 <hr> 
<!-- 案例标签4 -->
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
        {{ todo.text }}
        </li>
    </ol>
</div>

<script>
    //  案例4对应的vue内容
    var app4 = new Vue({
            el: '#app-4',
            data: {
                todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
                ]
            }
    })    
</script>    
<hr> 

<!-- 案例标签5 -->
<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>

<script>
    //  案例5对应的vue内容
    var app5 = new Vue({
            el: '#app-5',
            data: {
                message: '我爱你'
            },
            methods: {
                reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
                }
            }
    })    
</script>

**4.class 与 style** v-bind:class 绑定class style部分:

script部分:

html部分:

段落一

段落二

</div>
 <script>
     var vue = new Vue({
         el:"#app",
         data:{
             isBig:false,
             isRed:true,
            //  bigname:'big'
            //  redname:'red'
         }
     })
 </script>

v-bind:style 绑定style样式 style样式中的内容可以使用驼峰方式命名 // 传入style的值是单个值

// 传入style值的时候,还可以是一个对象