步骤:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入vue -->
<script src="./js/vue-2.6.12.js"></script>
</head>
<body>
<!-- 希望vue控制div -->
<div id="app">{{username}}</div>
<!-- 创建vue实例 -->
<script>
const vm = new Vue({
// el固定写法表vm实例控制哪个地方的区域
el: '#app',
//data就是要渲染的数据
data : {
username : 'zs'
}
})
</script>
</body>
</html>
VUE的内容渲染
分为三种:
/第一种:v-text(不常用) <p v-text="username"></p>
/ 第二种:{{}} (插值表达式)只能用在内容结点
<p>性别:{{gender}}</p>
/第三种:v-html 相当于 innerhtml
VUE的属性绑定指令
v-bind 用处很多所以可以简写为 :
<div id="app">
<input type="text" v-bind:placeholder="tips">
</div>
<div id="app">
<input type="text" :placeholder="tips">
</div>
反转的代码
<div id="app">
<input type="text" :placeholder="tips">
<hr>
<div>1+2结果是:{{1+2}}</div>
<hr>
<div>{{tips}}反转的结果是{{tips.split('').reverse().join('')}}</div>
</div>
使用v-bind如果需要字符串需要加单引号
<div :title="'box'+index">这是</div>
VUE绑定事件
v-on辅助DOM元素。method内填写要操作的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
<p>count的值是 : {{count}}</p>
<button v-on:click="add">+1</button>
</div>
<script>
const vm = new Vue({
el:'#app',
data :{
count : 0,
},
//methods作用是定义事件处理函数
methods:{
add : function(){
console.log('ok')
//简写方式: add(){填写表达式}
}
}
})
</script>
</body>
</html>
简写函数的方法如下,this指向vm实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
<p>count的值是 : {{count}}</p>
<button v-on:click="add">+1</button>
<button v-on:click="sub">-1</button>
</div>
<script>
const vm = new Vue({
el:'#app',
data :{
count : 0,
},
//methods作用是定义事件处理函数
methods:{
add(){
this.count+=1
},
sub(){
console.log('-1')
vm.count-=1
}
}
})
</script>
</body>
</html>
同样v-on:click方法可以传实参
<div id="app">
<p>count的值是 : {{count}}</p>
<button v-on:click="add(1)">+1</button>
</div>
<script>
const vm = new Vue({
el:'#app',
data :{
count : 0,
},
//methods作用是定义事件处理函数
methods:{
add(n){
this.count+=n
},
}
})
</script>
v-on因为使用频繁可以简写为@
<button @click="add(1)">+1</button>