vue的简单使用

安装
1.可以使用script标签引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.使用命令进行安装

npm install vue --save-dev
安装完成进行导入
import Vue from 'vue/dist/vue.js';

简单使用：

new Vue({
	el: '#box',		//el属性 渲染区域 (vue对象挂载的dom).
	data: {		//vue 对象数据
		message: 'hello world'
		datalist: [{name:'张三', age:20},{name:'李四', age:30}]
	},
	methods: {		//methods表 @click等绑定的监听函数。数据相互可以访问
		setcontent: function () {
			this.message = "我是直接更新的";
		}，
		setname: function () {
			this.datalist.push({
				name:'王五',
				age:40
			});
		}
	}
})
	  
1 页面中 id="box" 中有  hello world，在html中输入{{message}}。 //模板引擎
2 我在box的div上单击， 实现将 html {{message}}中位置 ，变成  "我是...."	
3 我只要把 data中的值改掉，页面直接就变化了(数据驱动)。

html页面：	
<div id="box" @click="setcontent">    //id box  vue对象的挂载dom节点
     {{message}}         //读取挂载进来的对象 data中 message的属性值
     <ul>
         <li v-for="(item, key) in datalist">{{item.name}}</li>  //v-for vue扩展标签(指令)
	  //v-for 循环指令。  datalist vue对象的值  (item ,key) item数据中的值  key表示键                                  
     </ul>
     <p v-for="(item2, key2) in datalist">{{item2.name}}</p>
     <button @click="setname">单击</button> //vue中事件绑定，只会在vue对象中methods中对应.
</div>

指令：
1.渲染指令 v-if v-for v-else v-else-if //依托标签 v-if/for 条件为false div就没有了
2.显示和隐藏 v-show //依托标签 条件 false div依然存在， display:none
3.显示html内容 v-text: 显示为文本 {{}} 功能一样 v-html: 显示解析html标签。
4.字符串 {{ }} 可以直接写在页面上.
事件: v-on:click @click @简写
动态属性绑定： v-bind / :src="" :简写
<img v-bind:src="imgsrc" />
v-model: 主要在表单中。 (表单一般需要和用户输入的内容及时交互). v-model 会立刻和vue data中数据直接交互。 v-bind 只是读取。v-model 即可读 也可写
v-model: 在表单中 可以实现默认选中(radio select checkbox)。 直接关联到数据(用户操作 表单值就会变化)
<input name="username" v-model="ok">