Vue的基础语法

简单介绍一下Vue的基础语法：
1.引入vue：
<script src="https://unpkg.com/vue"></script>

2.Vue存放的点
<div id="app"></div>

3.js中定义相关作用域
new Vue({
el:"#app",
data:{
message:"hello world"
}
})

4.模板语法介绍
--1--：表达式
文本插值：“{{}}”，表达式内可以用一些简单的逻辑，例如：
{{ data }},{{ 1+1 }}

将数据解析成dom节点，例如：
<div v-html="newHtml"></div>

--2--:指令
a>条件：v-if:(true)显示 (false)不显示
b>循环：v-for循环（可以循环数组，也可以循环对象）

--2.1--通过关键字"in"来循环：例如：
v-for="(v,k) in mydata"

--2.2--通过关键字"of"来循环
<ul v-for="(item,key) of mydata">
<li>姓名是：{{ item.name }}; 年龄是：{{ item.age }}</li>
</ul>
--2.3--循环对象可以拿到index的值
<p v-for="(v,k,index) in myobj>k的值是 {{ k }},v的值是{{ v }},索引是{{ index }}</p>

c>v-on：绑定事件，简写(@)，js里通过methods来定义事件，通过this来获取数据,例如
methods:{
showHide:function(){
this.judge = !this.judge;
}
}
注意：v-once:只执行一次，当数据改变时候，插值表达式内容将不再更新

d>v-bind：用来绑定属性，简写(:)
<div :id="idName">哈哈</div>

e>v-model:实现数据的双向绑定

d>修饰符：.prevent(阻止默认事件）
<a @click.prevent="test" href="http://www.baidu.com">点击到百度</a>

5.计算属性和观察者
例如：{{ message.split(' ').reverse().join(' ') }}
可以在computed里写
computed:{
nameReverse:function(){
return this.myname.split("").reverse().join("");
}
}
上面就可以写成：{{ nameReverse }}
发现计算属性也可以通过methods来替代，结果是一样的，(调用需要加括号)

计算属性提供geter/setter方法，默认会有get方法，当改变值的时候触发set方法，例如：
fullName:{
get:function(){
return this.firstName;
},
set:function(newValue){
console.log(newValue);
this.firstName = this.firstName + newValue;
}
}

观察者模式：watch Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性