Vue--01--（Vue渲染，基础语法，指令）

最新推荐文章于 2023-06-26 10:18:22 发布

非为鱼

最新推荐文章于 2023-06-26 10:18:22 发布

阅读量411

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_69015874/article/details/127174874

版权

Vue

(vue渲染，基础语法，指令)

1. 概念：Vue是一套用于构建用户界面的前端框架

2. vue特性：（1）数据驱动试图（2）双向数据绑定

2.1数据驱动试图

在用了vue的界面中，vue会监听数据变化，来自动渲染页面的结构
好处：只管把数据维护好，那么页面会被vue自动更新渲染出来；
单项：数据变化——>页面更新

2.2 双向数据绑定

在网页中，form采集数据，ajex负责提交数据；
JS数据的变化，会被自动渲染到界面上；
页面上表单采集的数据发生变化时，会被vue自动获取，更新到JS上

2.3 MVVM（Model，View，ViewModell）

ViewModell作为MVVM的核心，它是把当前页面的数据源（Model）和页面的结构（View）连接在了一起；
当数据源发生变化时，会被ViewModell监听到，VM会根据最新的数据源自动更新页面的结构；
当表单元素的值发生变化时，也会被VM监听到，VM会把变化后的最新的值自动同步到Model数据源。

3. vue基本使用

3.1 使用步骤：①导入vue.js的script脚本文件 ②在页面中声明一个将要被vue所控制的DOM区域 ③创建vm实例对象（vue实例对象）

<body>
//在页面中声明一个将要被vue控制的DOM区域
<div id="app">{{username}}</div>
//导入vue.js的script脚本文件
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
//指定当前vm实例要控制页面哪个区域
el:'#app',   //el属性是固定写法，接收值是一个选择器
//指定Model数据源，data对象就是要渲染到页面上的数据
data:{
username:'zhangsan'
}
})
</script>
</body>

4.vue指令

4.1 概念：

指令是vue 为开发者提供的模板语法，辅助开发者渲染页面的基本结构

4.2 分类：

内容渲染指令，属性绑定指令，事件绑定指令，双向绑定指令，条件渲染指令，列表渲染指令

一.内容渲染指令

常用有三个：

v-text
{{ }}
v-html

v-text

用法：

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

//把gender 对应的值，渲染到第er个p标签中
//注意：第二个p标签中，默认的 文本“性别”会被gender 的值覆盖掉
<p v-text="gender">性别</p>

缺点：会覆盖元素内部原有的内容，使用不多，了解即可

{{ }} 插值表达式

用法：

//将对应的值渲染到元素的内容节点中，同时保留元素自身的默认值
<p>姓名：{{username}}</p>

常用，只是内容的占位符，不会覆盖原有内容
只能用在内容节点，不能用在属性节点placeholder="..."在...处不可用

v-html

用法参照v-text，但是可以识别HTML标签（可以把带有标签的字符串，渲染成真正的HTML内容）

二.属性绑定指令

目的：为元素的属性动态绑定值，用v-bind可以简写为：
用法：

<div id="app">
<input type="text" v-bind:placeholder="tips">
<hr>
<img :src="photo" alt="">
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el:'#app', 
data:{
tips:'请输入用户名',
photo:'https...'
}
})
</script>

除了在插值与属性绑定中绑定简单的数据值之外，还可以支持Javascript表达式的运算
<div> 1+2 的结果是：{{1+2}}</div>
<div>{{ tips }} 反转的结果是：{{ tips.split('').reverse().join('') }}

三.事件绑定指令

v-on事件绑定指令
v-on: 可以简写为 @

用法：

<h3>count 的值为：{{count}} </h3>
//语法格式为 v-on:事件名="事件处理函数的名称"
//v-on: 可以简写为 @
<button v-on:click="addCount">+1</button>
//$event是固定写法，不可改变，相当于无参中的e
<button v-on:click="addC(4，$event)">+n</button>
<button @click="subCount">-1</button>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el:'#app', 
data:{
tips:'请输入用户名',
}，
//methods 的作用，就是定义事件的处理函数
methods:{
	addCount(e){    //函数无参数，默认有个e
	this.count + = 1  //等同于vm.count + = 1
	// this.count为偶数的时候变颜色，e的target属性下有button
	if(this.count%2==0){
		e.target.style.backgroundColor = 'red'
	}
	else{
		e.target.style.backgroundColor = 'green'
	}
	},
	
	//传参的函数
	addC(n,e) {
	this.count + = n  //等同于vm.count + = n
	<!--vue提供了内置的变量，名字是固定的，叫做$event，在有参时需要用到原生事件对象e时，就可以用$event，不常用-->
		if(this.count%2==0){
			e.target.style.backgroundColor = 'red'
		}
		else{
			e.target.style.backgroundColor = 'green'
		}
	},
	
	//定义事件的处理函数可以省略不写其中的`:function`
	subCount:function(){
	console.log('no')
	this.count - = 1  //等同于vm.count - = 1
	}
}
})
</script>

事件修饰符

<div id = 'app'>
//为a标签绑定点击事件，又阻止a的默认跳转行为@click.prevent
<a href = "https://www.b.com" @click.prevent = 'show'>跳转</a>
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
const vm = new Vue({
el:'#app', 
data:{
tips:'请输入用户名',
},
mothods:{
	show(){
	console.log('点击了a标签')
	}
}
})

按键修饰符

四.双向绑定指令

v-model，只有表单元素使用v-model指令才有意义，如：input输入框，textarea，select…

<div id="app">
<p>用户的名字是：{{ username }}</p>
//数据源渲染到文本框，文本框改动会同步到数据源
<input type="text" v-model="username">

//给出一个属性绑定指令作比较，下面的文本框改动不会同步到数据源
<input type="text" :value="username">
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
const vm = new Vue({
el:'#app', 
data:{
	username: 'zhangsan'
}
})
</script>

v-model的专用修饰符
如下：

五.条件渲染指令

条件渲染指令用来辅助开发者按需控制DOM元素的显示与隐藏。条件渲染指令有如下两个，分别是：v-if ，v-show

用法：

<div id="app">
//动态移除或者创建元素，频繁变换不建议用v-if
	<p v-if="networkState --- 200">请求成功 --- 被 v-if 控制</p>
//动态隐藏或者显示元素，display:none
	<p v-show="networkState --- 200">请求成功 --- 被 v-show 控制</p>
</div>

<div id="app">
	<p v-if="flag">被 v-if 控制</p>
	<p v-show="flag">被 v-show 控制</p>
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
const vm = new Vue({
el:'#app', 
data:{
//如果flag 为 true，则显示被控制的元素；如果flase，就隐藏
	flag: true
}
})
</script>

v-if与v-else就可以满足大多数情况

六.列表渲染指令

<div id="app">
	<table>
		<thead>
			<th>索引</th>
			<th>Id</th>
			<th>姓名</th>
		</thead>
		<tbody>
		//不一定 非要用item，可以自己定义名字
			<tr v-for='item in list'>
				<td>0</td>
				<td>{{item.id}}</td>
				<td>{{item.name}}</td>
			</tr>
		</tbody>
	</table>
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
const vm = new Vue({
el:'#app', 
//data对象就是要渲染到页面上的数据
data:{
	list: [
		{ id: 1, name: '李四'}
		{ id: 2, name: '张三'}
		{ id: 3, name: '王五'}
	]
}
})
</script>

v-for指令还支持一个可选的第二个参数，即当前项的索引，语法格式为(item,index) in items，其中item项和index索引都是形参，可以根据需要进行重命名，例如(user,i) in userlist。示例代码如下：

<div id="app">
	<table>
		<thead>
			<th>索引</th>
			<th>Id</th>
			<th>姓名</th>
		</thead>
		<tbody>
		//需要索引的话，就加小括号
		<!--官方建议：只要用到了v-for指令，那么一定要绑定一个:key属性，而且，尽量把id作为key的值-->
		<!--官方对key的值类型，是有要求的：字符串或数字类型-->
		<!--key的值是不能重复的，否则会报错，所以用id是比较推荐的。索引不具有唯一性并且与每一项的数据之间不具有关联性，因此不要用索引-->
			<tr v-for="(item,index) in list" :key="item.id">
				<td>{{ index }}</td>
				<td>{{ item.id }}</td>
				<td>{{ item.name }}</td>
			</tr>
		</tbody>
	</table>
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
const vm = new Vue({
el:'#app', 
//data对象就是要渲染到页面上的数据
data:{
	list: [
		{ id: 1, name: '李四'}
		{ id: 2, name: '张三'}
		{ id: 3, name: '王五'}
	]
}
})
</script>