Vue.js入门基础语法

介绍：
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
优点：
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单。
使用步骤：
1.导入js文件(vue.min.js)；
js文件地址：https://vuejs.org/js/vue.min.js
2.创建Vue对象：
Vue对象常用属性
el：,//绑定要控制的标签id
data:,//存放绑定标签内部要用的数据，
methods://存放函数，用于绑定标签内部的事件处理
举例：
//创建 Vue对象，注意会把数据,存储到window对象下面，方便使用
var vm=new Vue({
el:’#app’,//表示这个vm对象要控制的标签
data:{//存放要用的数据，使用json格式，
//注意vue中json格式键 字符串的引号可以省略；
msg:‘hello vue’
style1:{color:red,size:1.2em},
style2:{color:blue,size:1.5em},
list:[1,2,3,4,5]
},
methods:{ //设置事件，对应的函数
//定义函数，注意function关键字可省略
show:function(){
alert(‘hello vue’);
}
}
});
3.使用vue 操作绑定的标签：
3.1操作标签内容值：
表达式{{数据名称}}
举例:{{msg}}
v-text:不支持html标签
<font v-text=“msg”></font>
v_html:支持html标签
<font v-html=“msg”></font>
3.2操作标签属性值：
v-bind:
举例： <input type=“button” v-bind:title=‘msg’>
注意：使用可以省略 v-bind ,只使用冒号
举例：<input type=“button” :title=‘msg’>
3.3.数据双向绑定：
格式：v-model:
举例： <input type=“button” v-model=‘msg’>
注意：
1.只能绑定表单标签
2.数据绑定在标签value属性值上；
3.4操作标签事件：
格式：v-on:
举例：<input type=“button” :title=‘msg’ v-on:click=“show”>
注意：
可以使用@符号替换v_on
举例：<input type=“button” :title=‘msg’ @click=“show”>
事件的分发机制，默认从外到里 一层一层触发；
避免触发不必要的事件触发 使用 事件修饰符：
阻止单击事件冒泡:<input type=“button” :title=‘msg’ v-on:click.stop=“show”>
提交事件不再重载页面 : <form v-on:submit.prevent=“show”>
修饰符可以串联:<a v-on:click.stop.prevent=“show”>
只有修饰符:<form v-on:submit.prevent></form>
添加事件侦听器时使用事件捕获模式 :<div v-on:click.capture=“show”></div>
只当事件在该元素本身（而不是子元素）触发时触发回调 :<input type=“button” :title=‘msg’ v-on:click.self=“show”>
click 事件只能点击一次，2.1.4版本新增 :<a v-on:click.once=“show”></a>
3.5操作样式
3.5.1:class样式
格式：:class
举例：
<style>
.aa{color:red;}
.bb{size:1.5em;}
.cc{color:red;}
</style>
<font :class="[‘aa’,‘bb’]"></font>
//三元表达式
举例：<font :class="[‘color’,‘size’,true?‘cc’]:’’"></font>
//改进 三元表达式 使用对象:
//格式：{样式名称:boolean} true时使用 样式
举例：<font :class="[‘color’,‘size’,{‘cc’:true}]"></font>
<font:ontass="{‘cc’:true,‘aa’:true,‘bb’:true}"></font>
3.2.5:操作 style 格式 :style
举例：
<font :stype="{color:‘red’,size:‘1.2em’]"></font>
//使用vue data 数据中的样式
<font :stype=“style1”></font>
<font :stype="[style1,style2]"></font>