Vue基础
官网：https://cn.vuejs.org/v2/guide/
<head>
<title>test</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- 此元素是vue实例的挂载点，此元素的所有内容称之为模板，模板也可以在创建vue实例时编写 -->
<div id="root">
<!-- 1.0 {{msg}}这种语法，称之为插值表达式 -->
<h1>{{testMsg1}}</h1>
<!-- 2.0 指令的语法是：指令名=’javascript表达式‘ -->
<!-- 使用指令v-text插值，此处的testMsg2是一个变量，也可以是一个js表达式 -->
<h1 v-text="testMsg2"></h1>
<!-- 3.0 使用指令v-html插入html -->
<h1 v-html="testMsg3"></h1>
<!-- 4.0 绑定事件：绑定点击事件 -->
<h1 v-on:click="testClick">{{testClickEvent}}</h1>
<!-- 绑定事件缩写 -->
<h1 @click="testClick">{{testClickEvent}}</h1>
<!-- 5.0 属性绑定，将元素的title属性与vue的实例数据testTitle -->
<h1 v-bind:title="testTitle">测试属性绑定</h1>
<!-- 属性绑定(简写) -->
<h1 :title="testTitle">测试属性绑定的简写</h1>
<!-- 6.0 单向绑定：数据可以决定页面上的内容，但页面内容无法决定数据的内容
双向绑定：数据和页面任何一方发生改变，都会改变另一方
-->
<!-- 6.1 双向绑定 -->
<!-- v-model指令可以用于<input>、<textarea> 及 <select> -->
<input v-model="testTwoWayBinding" />
<div>{{testTwoWayBinding}}</div>
<br/><br/><br/>
<!-- 7.0 计算属性 -->
姓：<input v-model="firstName">
姓：<input v-model="lastName">
<div>{{fullName}}</div>
<div>{{count}}</div>
<br/><br/><br/>
<!-- 8.0 v-if指令：testIsShow为false时，v-if指令会将元素从dom中删除;为true时，会重新创建 -->
<div v-if="testIsShow">测试v-if指令</div>
<!-- 8.1 v-show指令:testIsShow为false时，v-show指令会将元素css设为display:none;并不会删除元素，因此频繁使用时效率较高 -->
<div v-show="testIsShow">测试v-show指令</div>
<button @click="testIsShowClickEvent" >点击测试</button>
<br/><br/><br/>
<!-- 9.0 v-vor指令 -->
<ul id="example-1">
<li v-for="item in items">
{{"测试v-for:"+item.message}}
</li>
</ul>
<br/><br/><br/>
</div>
<script type="text/javascript">
// 创建vue实例
new Vue({
el:"#root",
// template:'<h1>{{testMsg1}}</h1>', // 此处也可以为挂载点设置模板
data:{
testMsg1:"hello word1",
testMsg2:"hello word2",
testMsg3:"hello word2<a href='#'>33</a>",
testClickEvent:"点击测试事件绑定",
testTitle:"这是测试title",
testTwoWayBinding:"测试双向绑定",
firstName:"",
lastName:"",
count:0,
testIsShow:true,
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
},
created:{
// 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调
},
methods:{
testClick:function(){
// 更改当前实例中的数据，页面自动同步数据内容
this.testClickEvent = "更改指定vue实例数据，并自动同步至UI";
},
testIsShowClickEvent:function(){
this.testIsShow = !this.testIsShow;
}
},
computed:{ // 声明计算属性
// 声明计算属性fullName，fullName属性的值将来自此方法的计算
fullName:function(){
// vue会缓存计算属性的值，如果参考计算的数据没有发生变化，则计算属性会直接返回上次的计算结果；
return this.firstName + " " + this.lastName;
}
},
watch:{ // 声明侦听器
// 监听firstName的改变
// firstName:function(){
// this.count++;
// }
// 监听fullName的改变
fullName:function(){
this.count++;
}
}
});
</script>
