引入 vue.js , 通过 script 形式, vue 官网语法记录
创建 vue 应用, 数据和 DOM 已经被建立了关联, 所有东西都是响应式的
1: 插值
缺点: 让你的网速慢, 或者数据加载失败时, 会在浏览器中直接渲染插值 js 禁用, javascript 报错也会导致这个问题
- html: <section id = "content" > <p id = "Mustache" > 没有v - once,
- {
- {
- msg
- }
- } < /p>
- </section > js: var vm = new Vue({
- el: "#content",
- data: {
- msg: "hello my lord"
- }
- });
- result:
2:v-once: 通过使用 v-once 指令, 执行一次性的插值当数据改变时, 插值处的内容不会继续更新
- html:
- <section id="content">
插值:
- <p id="Mustache">
- {{msg}}
- </p>
- <p>
- v-once: 当数据改变时, 插值处的内容不会更新
- </p>
- <span v-once>
- {{msg}}
- </span>
- </section>
- js: var vm = new Vue({ el:"#content", data: { msg: "hello once" } });
- result:
3v-text 和 v-html
- html:
- <section id="content">
- v-text:
- <span v-text="tipHtml"></span><br>
原始 HTML:v-html 指令
- <span v-html="tipHtml"></span>
- </section>
- js:
- var vm = new Vue({
- el:"#content",
- data: {
- tipHtml: "<b > 小心点, 明天 </b>"
- }
- });
结果:
总结: v-text: 会把 html 标签也解析为文本, 而 v-html 可以解析 html 标签
来源: http://www.jb51.net/article/133204.htm