<!DOCTYPE html>
<html>
<body>
<div id="app1">
<!--三、指令-->
<!--1.插值表达式-->
{{name}}
<!--2.v-text 绑定文本-->
<div v-text='age'></div>
<!--3.v-html 绑定html-->
<div v-html="age"></div>
<!--4 v-bind 绑定属性，可用:代替-->
<a v-bind:href="link">baidu</a>
<span v-bind:class="{active:isActive}" :style="{color:color}">111</span>
<!--5.v-model 绑定表单 （双向）-->
<input v-model="link" />
<!--6. v-on 指令，可用@代替-->
<button v-on:click="hello">hello</button>
<!--（1）事件修饰符
内部.stop 阻止冒泡
.prevent 阻止事件
-->
<div style="padding:20px; border :1px solid red" @click=hello()>外
<div style="padding:20px; border :1px solid green" @click.stop=hello()>内
<a v-bind:href="link" @click.prevent>baidu</a>
</div>
</div>
<!--(2)按键修饰符 up,down ,enter,tab...-->
<input v-model="num" @keyup.up="num+=2" @keyup.down="num--"></input>
<!-- 7 v-for 遍历-->
<!--（1） 遍历数组 ，加上:key绑定唯一键能提高渲染效率
"each in arr" "(each,index) in arr"
-->
<li v-for=" (each,i) in users" :key="each.name">
{{i}}: {{each.name}}--{{each.age|numFilter}}
</li>
<!--（2） 遍历对象
"each in obj" "(value,key) in obj" "(value,key,index) in obj"
-->
<br />
<li v-for=" (v,k,i) in user">
{{i}}: {{k}}--{{v}}
</li>
<!--8.v-if v-else-if v-else 判断 -->
<h1 v-if="num<10">10</h1>
<h1 v-else-if="num<20">20</h1>
<h1 v-else-if="num<30">30</h1>
<h1 v-else>40</h1>
taotalAge: {{totalAge}}
<!--四、组件化 template -->
<br />
<counter></counter>
<br />
<counter></counter>
<br />
<thisCounter></thisCounter>
<br />
<thisCounter></thisCounter>
</div>
<!--
一、安装vue@2.6.10
1.打开文件夹，terminal执行npm install vue@2.6.10
2.创建index.htlm引入 vue.js
-->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//四、1.全局声明注册一个组件,并在当前vue实例的components中加入
Vue.component('counter', {
//vue实例的el改为template
template: `<button @click="count++"> 点击了{{count}}次</button>`,
//data改为方法
data() {
return {
count: 1
}
}
});
//四、2.声明局部组件
var thisCounter = {
//vue实例的el改为template
template: `<button @click="count++"> 点击了{{count}}次</button>`,
//data改为方法
data() {
return {
count: 1
}
}
};
//二、vue声明式渲染
new Vue({
//绑定元素
el: '#app1',
//封装数据
data: {
name: '张三',
age: '<font color="red">18</font>',
link: "http://www.baidu.com",
isActive: true,
fontSize: 30,
color: 'green',
num: 0,
users: [{ name: '张飞', age: 17 }, { name: '刘备', age: 20 }, { name: '关于', age: 19 }],
user: { name: '张飞', age: 17 }
},
//封装方法
methods: {
hello() {
alert("hello")
},
show() {
var n = Math.floor(Math.random() * 100);
alert(n);
return n % 2 == 1;
}
},
//计算属性
computed: {
//以数据的方式调用
totalAge() {
return this.users[0].age + this.users[1].age
}
},
//侦听器：监控某个数据
watch: {
num(newVal, oldVal) {
console.log(newVal, oldVal);
}
},
//过滤器
filters: {
numFilter(val) {
console.log(val)
if (val >= 20) {
return val * 2
} else {
return val
}
}
},
//局部组件
components: {
thiscounter: thisCounter
}
//生命周期函数 created mounted updated destoryed ...
})
</script>
</body>
</html>
