创建一个Vue实例
var vm = new Vue(){ el:'#app',data:{},methods:{} }
在html中完整代码
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../vue.js"></script> </head> <body> <div id="app"></div> <script> var vm = new Vue({ el:'#app',methods:{} }) </script> </body> </html>
常用标签用法:v-cloak、v-html、v-bind、v-on
差值表达式和v-cloak
{{}} (差值表达式):
<div id="app"> <p>{{msg}}</p> </div>
js代码 :
var vm = new Vue({ el:'#app',data:{ msg:"Hello World!" },methods:{} })
使用v-cloak:
<div id="app"> <p v-cloak>{{msg}}</p> </div>
区别:v-cloak会屏蔽
标签中的{{msg}},解决文本闪烁问题。ps:{{}}前后可以自定义文本,且在使用v-claok后
? 和msg一起显示
测试方法:将vue.js在DOM之后导入,使用live server打开页面,将network调至slow 3G,会发现差值表达式方 法的页面会先显示{{msg}}再显示"Hello World!"。
v-html和v-text
v-html:可以识别msg文本中的DOM标签。
v-text:识别纯文本,且只识别msg中的文本,
标签中的文本不会被识别
v-html
<div id="app"> <p v-html="msg"></p> </div>
var vm = new Vue({ el:'#app',data:{ msg:"<h2>你好,我在测试v-html的作用</h2>" },methods:{} })
v-text
<div id="app"> <p v-html="msg">1111111</p> </div>
var vm = new Vue({ el:'#app',})
v-bind
可以绑定属性,可以直接简写为冒号‘:’。下面例子将title属性绑定在mytitle上
<div id="app"> <!--可直接将v-blind:简写为“:” --> <input type="button" value="按钮" v-bind:title="mytitle" > </div>
var vm = new Vue({ el:'#app',data:{ mytitle:"这是一个button" },})
v-on
给DOM绑定事件。
<div id="app"> <!--可直接将v-on:简写为“@” --> <input type="button" value="按钮" v-on:click="show"> </div>
var vm = new Vue({ el:'#app',methods: { show: function () { alert("Hello!"); } },})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。