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标签

v_html:支持html标签

3.2操作标签属性值：
v-bind:
举例：
注意：使用可以省略 v-bind ,只使用冒号
举例：
3.3.数据双向绑定：
格式：v-model:
举例：
注意：
1.只能绑定表单标签
2.数据绑定在标签value属性值上；
3.4操作标签事件：
格式：v-on:
举例：
注意：
可以使用@符号替换v_on
举例：
事件的分发机制，默认从外到里 一层一层触发；
避免触发不必要的事件触发 使用 事件修饰符：
阻止单击事件冒泡:
提交事件不再重载页面 :

修饰符可以串联:
只有修饰符:
添加事件侦听器时使用事件捕获模式 :

只当事件在该元素本身（而不是子元素）触发时触发回调 :
click 事件只能点击一次，2.1.4版本新增 :

3.5操作样式
3.5.1:class样式
格式：:class
举例：


//三元表达式
举例：
//改进 三元表达式 使用对象:
//格式：{样式名称:boolean} true时使用 样式
举例：

3.2.5:操作 style 格式 :style
举例：

//使用vue data 数据中的样式