创建一个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!");
}
},})
