Vue基础

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

一，插值的几种方式
1，文本插值，使用双大括号{ {}}

 js代码：
                    var vm = new Vue({
                        el:"#app",
                        data:{
                            text:"文本"
                        }
                    })
  html代码：
                    <div id="app">{ {text}}</div>  // 文本
2，原始html
双大括号会将数据解析成普通文本，而不是html代码。为了输出真正的html，需要使用 v-html指令
举例：

                js代码：
                    var vm = new Vue({
                        el:"#app",
                        data:{
                            orihtml:"<span style='color:red'>红色</span>"
                        }
                    })
                html代码：
                    <div id="app" v-html="orihtml"></div>  // 红色
                    <div id="app">{ {orihtml}}</div>  // <span style='color:red'>红色</span>
3，属性
双大括号语法不能作用到属性上，这种情况使用指令:v-bind
举例：

                <ul v-for="item in category" v-bind:key="item.id">
                    <li>{ {item.name}}</li>
                    <li>{ {item.description}}</li>
                </ul>
               // 动态的为key绑定一个属性，这个属性为item.id 
                //v-bind具有简写形式
                //    <ul :key="item.id"></ul>
JavaScript表达式

            { {1+1}}
            { {num + 1}}