Vue（二）——基本操作

使用步骤

1. 导入vue.js的script脚本文件
2. 在页面中声明一个将被vue所控制的DOM区域
3. 创建vm实例对象

el

vue控制父元素下面的子元素，el就是他们的父元素。

指令

v-text

//把username对应的值渲染到p标签中
<p v-text="username"></p>

注意：v-text会覆盖标签里默认的内容

{{}}插值表达式

大多是用来当占位符，并且只能在内容节点中

<p>姓名：{{name}}</p>

v-html

v-text和插值表达式只能渲染纯文本内容，如果把包含HTML标签的字符串渲染为页面的HTML元素，用v-html指令

<p v-html="discription"></p>

属性绑定指令 v-bind（：）

<input v-bind:placeholder="tips">
//tips是data里的一个属性值

v-bind可以简写成：

事件绑定指令v-on（@）

为DOM元素绑定事件监听,可以简写成@

<button v-on:click="addCount">+1</button>

const vm = new Vue({
	el:'#app',
	data: {
		count:0
	},
	methods:{
		add() {
			this.count+=1 //this===vm
		}
	},
})

传参：

<button v-on:click="add(1)">+1</button>
//----------------------------------------------
methods:{
	add(n) {
	this.count+=n
	}
}

event事件对象

vue内置对象$event，他就是原生DOM的事件对象 e

<button @click="add($event,1)">+N</button>
//------------------------------------------------
methods: {
	add(n,e) {
		this.count += n
		console.log(e)
	}
}

阻止默认行为和冒泡

什么是冒泡行为
给里面的绑定了点击事件，当里面的被触发之后会让外层的也触发，我们不想让外层的触发，就要阻止冒泡

@click.prenvent 阻止默认行为
@click.stop 阻止事件冒泡

双向绑定指令v-model

双向绑定指令针对表单
用来在不操作DOM的情况下，快速获取表单的数据

data里面的值发生变化时，input标签里面的值也会变化，同时因为v-model，当input标签里的值变化时，data里面的值也变

• 哪些可以用v-model指令
  
• v-model 的专用修饰符
  v-model.number="age" .number属性就把输入框里面的值转换成了数字类型
  .trim只会把首尾的空格去掉 中间的不会
  .lazy 就不会实时更新，失去焦点之后才会同步

条件渲染指令v-if v-show

<p v-if="networkState === 200">请求成功</p>
<p v-show="networkState === 200">请求成功</p>

区别：
当v-if为false时，是动态移除元素，v-show是动态添加了display=none，不移除标签
如果频繁使用切换功能时，使用v-show
如果默认不需要被展示，后期才又可能被展示，使用v-if
（但实际开发中还是用v-if多）

列表渲染 v-for

用来基于一个数组来循环一个列表结构
写在需要循环的li中
并且绑定一个key属性，必须是字符串或数字类型，一般我们就用:key="item.id"

<ul>
	<li v-for="(item,index) in list" :key="item.id">索引是{{index}}，姓名是{{item.name}}</li>
</ul>
//----------------------------------------------
data： {
	list：[
	{id:1,name:'zs'},
	{id:2,name:'ls'},
	]
},

key注意事项：

1. key的值只能是字符串或数字类型
2. 必须具有唯一性（即：key的值不能重复）
3. 建议把数据项的id作为key的值
4. 使用index作为key的值没有任何意义（因为index的值不具有唯一性）
5. 使用v-for指令时一定要指定key的值