# vue

# Vue 入门

# Vue 引入

开发版本包含完整的警告和调试模式
生产版本删除了警告，33.30KB min+gzip

vue 插值及常用指令

下面所有的例子必须在引入 vue 的前提下才能运行

用来插入文本内容及执行简单的函数

<div id="app">
	<div>
		{{ name }}
	</div>
</div>
<script>
	var vm = new Vue({
		el: "#app", // 需要挂载到某个元素上
		data() {
			// 数据仓库
			return {
				name: "王五1111",
			};
		},
	});
</script>

指令 v-text v-html

v-text 是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。
v-html 用于输出 html，它与 v-text 区别在于 v-text 输出的是纯文本，浏览器不会对其再进行 html 解析，但 v-html 会将其当 html 标签解析后输出。

<!-- 例 v-text -->
<div id="app">
	<div v-text="name"></div>
</div>
<script>
	var vm = new Vue({
		el: "#app", // 需要挂载到某个元素上
		data() {
			// 数据仓库
			return {
				name: "王五1111",
			};
		},
	});
</script>

<!-- 例 v-html -->
<div id="app">
	<div v-html="name"></div>
</div>
<script>
	var vm = new Vue({
		el: "#app", // 需要挂载到某个元素上
		data() {
			// 数据仓库
			return {
				name: "<span>王五</span>",
			};
		},
	});
</script>

v-if v-show
- 指令 v-show 控制元素的显示和隐藏特点是 vue 在渲染有 v-show 的节点时这个节点的样式为 display:none
- v-if 也是控制元素的显示和隐藏如果隐藏的话在页面里面这个节点是不会渲染的

<!-- v-if v-show 区别 -->
<div id="app">
	{{ name }}
	<div v-if="isShow">age : {{ age }}</div>
	<div v-show="isShow">age : {{ age }}</div>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data() {
			return {
				name: "王五",
				age: 30,
				isShow: false,
			};
		},
	});
</script>

v-if v-else-if v-else vue 的条件语句
- v-if 控制元素的显示和隐藏
- v-else-if 前一兄弟元素必须有 v-if 或 v-else-if。
- v-else 前一兄弟元素必须有 v-if 或 v-else-if。

<div id="app">
	<div v-if="age>30">
		{{ name }}
	</div>
	<div v-else-if="age == 30">
		{{ name2 }}
	</div>
	<div v-else>
		{{ name1 }}
	</div>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data() {
			return {
				name: "王五",
				name1: "李四",
				name2: "张三",
				age: 30,
				isShow: false,
			};
		},
	});
</script>

v-for 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：
- v-for 循环的时候必须绑定 key 值,vue 是根据这个 key 值判断元素，key 值是唯一的，一般用 id 表示

<ul>
	<li v-for="(item , index) in list" :key="item.id">
		{{ item.title }}
	</li>
</ul>
<script>
	var vm = new Vue({
		el: "#app",
		data() {
			return {
				list: [
					{
						name: "张三",
						id: 1,
					},
					{
						name: "李四",
						id: 2,
					},
					{
						name: "王五",
						id: 3,
					},
				],
			};
		},
	});
</script>

v-bind 绑定标签中的某一个属性 v-bind可以去掉直接用一个:表示
- v-bind简写 : 用一个冒号表示

<h2 v-bind:title="title">
	我是标签
</h2>
<script>
	var vm = new Vue({
		el: "#app",
		data() {
			return {
				title: "标签",
			};
		},
	});
</script>

v-once只在页面里面渲染一次

# v-model

Vue 的核心特性之一是双向绑定，vue 的响应式原理是实现了数据－>视图，接下来我们要学习视图－>数据的原理。v-model

用法： v-model 指令用来在 input、select、text、checkbox、radio 等表单控件或者组件上创建双向绑定。你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

双向绑定文本

<div id="demo">
	<input v-model="message" placeholder="edit me" />
	<p>Message is: {{ message }}</p>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#demo",
		data: {
			message: "hello vue",
		},
	});
</script>

多行文本

<div id="demo">
	<span>Multiline message is:</span>
	<p style="white-space: pre">{{ message }}</p>
	<br />
	<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#demo",
		data: {
			message: "hello vue",
		},
	});
</script>

复选框
- 单个勾选框，

<div id="demo">
	<input type="checkbox" id="checkbox" v-model="checked" />
	<label for="checkbox">{{ checked }}</label>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#demo",
		data: {
			checked: false,
		},
	});
</script>

多个勾选框，绑定到同一个数组：

<div id="demo">
	<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
	<label for="jack">Jack</label>
	<input type="checkbox" id="john" value="John" v-model="checkedNames" />
	<label for="john">John</label>
	<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
	<label for="mike">Mike</label>
	<br />
	<span>Checked names: {{ checkedNames }}</span>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#demo",
		data: {
			checkedNames: [],
		},
	});
</script>

单选按钮

<div id="demo">
	<input type="radio" id="one" value="One" v-model="picked" />
	<label for="one">One</label>
	<br />
	<input type="radio" id="two" value="Two" v-model="picked" />
	<label for="two">Two</label>
	<br />
	<span>Picked: {{ picked }}</span>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#demo",
		data: {
			picked: "",
		},
	});
</script>

选择列表

<div id="demo">
	<select v-model="selected">
		<option>A</option>
		<option>B</option>
		<option>C</option>
	</select>
	<span>Selected: {{ selected }}</span>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#demo",
		data: {
			selected: null,
		},
	});
</script>

# v-model 修饰符

.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" />

.number 如果想自动将用户的输入值转为 Number 类型，可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="text" />

.trim 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg" />

← vue 简介计算属性和侦听器 →