vue02模板语法


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
			<p>文本p>
			{{msg}}
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					msg:'hello vue!!!'
				}
			}
		})
	script>
html>

运行结果如图所示：

2.html

使用v-html指令用于输出html代码

代码演示：

运行结果如图所示：

所以我们要用到v-html指令输出html代码


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
			<p>文本p>
			{{msg}}
			<p>html页面转义p>
			<div v-html="htmlstr">div>
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					msg:'hello vue!!!',
					htmlstr:'文本内容'
				}
			}
		})
	script>
html>

运行结果如图所示:

3.属性

HTML属性中的值应使用v-bind指令

运行结果：

所以说我们要用v-bind 指令


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
			<p>文本p>
			{{msg}}
			<p>html页面转义p>
			<div v-html="htmlstr">div>
			<p>v-bind 属性绑定p>
			<input value="值" />
			<input v-bind:value="valuestr" />
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					msg:'hello vue!!!',
					htmlstr:'文本内容',
					valuestr:'vue值'
				}
			}
		})
	script>
html>

运行结果如图所示：

4.表达式

Vue 提供了完全的JavaScript 表达式支持

{{str.substr(0,6).toUpperCase()}}

{{number + 1}} {{ok ? 'YES' : 'NO'}}

我的id是js动态生成的


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
			<p>文本p>
			{{msg}}
			<p>html页面转义p>
			<div v-html="htmlstr">div>
			<p>v-bind 属性绑定p>
			<input value="值" />
			<input v-bind:value="valuestr" />
			<input :value="valuestr" />
			<p>vue 中可以对变量进行二次处理或可以使用js的语法p>
			{{str.substring(0,4)}}<br/>
			{{num + 4}}<br>
			{{ok ? '1' : '0'}}<br>
			
			<span :id="idstr+'id'">书籍信息span>
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					msg:'hello vue!!!',
					htmlstr:'文本内容',
					valuestr:'vue值',
					str:'hello world',
					num:6,
					ok:false,
					idstr:'book_'
				}
			}
		})
	script>
html>

运行结果如图所示：

5. class 绑定

使用方式：v-bind：class="expression"

expression 的类型：字符串、数组、对象

第一个方式：


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
		<style type="text/css">
			.a{
				color: greenyellow;
			}
		style>
	head>
	<body>
		
		<div id="app">
			<p>class 绑定p>
			<span class="a">文本内容span>
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
				
				}
			}
		})
	script>
html>

第二种方式：


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
		<style type="text/css">
			.a{
				color: greenyellow;
			}
		style>
	head>
	<body>
		
		<div id="app">
			<p>class 绑定p>
			<span :class="classStr">文本内容span>
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					classStr:'a'
				}
			}
		})
	script>
html>

运行结果都是一样的：

6.style 绑定

v-bind:style="expression"

expression 的类型：字符串、数组、对象


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
			<p>style 绑定p>
			<span :style="styleStr">文本内容span>
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					styleStr:'color:blue;'
				}
			}
		})
	script>
html>

运行结果如图所示：

二、指令

指令指的是带有 “v-” 前缀的特殊属性

核心指令

(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if

v-else上一个兄弟元素必须是v-if或者是v-else-if

  v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

  v-for：类似JS的遍历，

遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

  v-bind ：绑定属性

  v-on ：绑定事件

  v-model：数据的双向绑定

v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

v-for/v-model一起绑定[多选]复选框和单选框

1.v-if/v-else/if/v-else


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
			<p>v-ifp>
			
		请输入分数：<input v-model="score" />
		对应的结果：
		<span v-if="score<60">不及格span>
		<span v-else-if="score<70">及格span>
		<span v-else-if="score<80">良span>
		<span v-else-if="score<90">优秀span>
		<span v-else-if="score<=100">优+span>
		<span v-else="">输入格式不正确span>
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return{
					score:0
				}
			}
		})
	script>
html>

运行结果如图所示：输入什么就对应的什么

2. v-show 与 v-if 的区别

v-show是通过display=none去隐藏了这个标签，而v-if 连这个标签的没有了

代码演示：


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
		<p>v-showp>
		请输入结果：<input v-model="showflag" />
		<span v-show="showflag">show：展示与否span>
		<span v-if="showflag">if:展示与否span>
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return{
					showflag:false
				}
			}
		})
	script>
html>

运行结果如图所示：

3. v-for

注意：下拉框是写在里面，复选框是写在外面


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
			<p>v-forp>
			<select>
				<option v-for="l in likes" :value="l.id">{{l.name}}option>
			select>
			<br />
			<div v-for="l in likes">
				<input type="checkbox" :value="l.id"/>{{l.name}}
			div>
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el: '#app',
			// 变量区
			data() {
				return {
					likes: [{
							id: 1,
							name: '军旗'
						},
						{
							id: 2,
							name: '桌球'
						},
						{
							id: 3,
							name: '乒乓球'
						},
						{
							id: 4,
							name: '篮球'
						}
					]
				}
			}
		})
	script>
html>

运行结果如图所示：

4.v-model 是数据的双向绑定

v-bind 是绑定属性

v-on 是绑定事件

Ctrl+k是格式化代码，重新对齐上面整合的代码：


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
			<p>v-ifp>
			
			请输入分数：<input v-model="score" />
			对应的结果：
			<span v-if="score<60">不及格span>
			<span v-else-if="score<70">及格span>
			<span v-else-if="score<80">良span>
			<span v-else-if="score<90">优秀span>
			<span v-else-if="score<=100">优+span>
			<span v-else="">输入格式不合法span>
			<p>v-showp>
			请输入结果：<input v-model="showflag" />
			<span v-show="showflag">show：展示与否span>
			<span v-if="showflag">if:展示与否span>
			<p>v-forp>
			<select>
				<option v-for="l in likes" :value="l.id">{{l.name}}option>
			select>
			<br />
			<div v-for="l in likes">
				<input type="checkbox" :value="l.id"/>{{l.name}}
			div>
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el: '#app',
			// 变量区
			data() {
				return {
					score: 0,
					showflag: false,
					likes: [{
							id: 1,
							name: '军旗'
						},
						{
							id: 2,
							name: '桌球'
						},
						{
							id: 3,
							name: '乒乓球'
						},
						{
							id: 4,
							name: '篮球'
						}
					]
				}
			}
		})
	script>
html>

三、过滤器

一般会使用全局过滤器

Vue.filter('filterName', function (value) {

// value 表示要过滤的内容

});

局部过滤器

new Vue({

filters:{'filterName':function(value){}}

});

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

{{ name | capitalize }}

注1：过滤器函数接受表达式的值作为第一个参数

注2：过滤器可以串联

{{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

注4：js定义一个类

function Stu(){};

Stu.prototype.add(a,b){};//添加一个新的实例方法

Stu.update(a,b){};//添加一个新的类方法

过滤器：时间格式，翻译，多一个点0，时间的处理，数据的处理都可以通过过滤器来处理


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
			
			{{msg|strSplit}}
		div>
	body>
	<script type="text/javascript">
		// 前端的打断点
		// debugger;
		// strSplit:过滤器的名字
		Vue.filter('strSplit',function(value){
			// value:处理的变量
			console.log(value);
			return value;
		})
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return{
					msg:'hello vue!!!'
				}
			}
		})
	script>
html>

运行结果如图所示：

运行的结果如图所示：

过滤器的串联

过滤器的传参


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
			
			
			
			{{msg|strSplit|strSplit2}}
			
			{{msg|strSplit3(2,5)}}
			{{msg|strSplit3(1,4)}}
		div>
	body>
	<script type="text/javascript">
		// strSplit:过滤器的名字
		Vue.filter('strSplit',function(value){
			// 前端的打断点
			// debugger;
			// value:处理的变量
			console.log(value);
			return value.substring(0,5);
		})
		Vue.filter('strSplit2',function(value){
			// value:处理的变量
			console.log(value);
			return value.substring(3,5);
		})
		Vue.filter('strSplit3',function(value,a,b){
			// value:处理的变量
			console.log(value);
			return value.substring(a,b);
		})
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return{
					msg:'hello vue!!!'
				}
			}
		})
	script>
html>

运行结果如图所示：

四、计算属性与监听属性

这些写就会拼接起来

如图所示：

1.计算属性

监听属性：是你输入的两个值直接影响到这个结果单方面的影响

代码块：


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
			<p>计算属性p>
			请输入第一个数<input v-model="x" /><br>
			请输入第二个数<input v-model="y" /><br>
			结果为：{{addFlag}}
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					x:0,
					y:0
				}
			},computed:{
				// 计算属性
				addFlag:function(){
					return parseInt(this.x) + parseInt(this.y)
				}
			}
		})
	script>
html>

运行结果如图所示：

2.监听属性

监听属性：是相互之间印象

代码块：


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		
		<div id="app">
			<p>计算属性p>
			请输入第一个数<input v-model="x" /><br>
			请输入第二个数<input v-model="y" /><br>
			结果为：{{addFlag}}
			<p>监听属性p>
			请输入千米：<input v-model="km" /><br>
			请输入米：<input v-model="m" /><br>
		div>
	body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el: '#app',
			// 变量区
			data() {
				return {
					x: 0,
					y: 0,
					km:0,
					m:0
				}
			},
			computed: {
				// 计算属性
				addFlag: function() {
					return parseInt(this.x) + parseInt(this.y)
				}
			},
			watch:{
				km:function(v){
					// :之前对应的是被监听的属性,v指的是被监听属性的值
					// 当v对应的值发生变化的时候,会执行这个方法
					//  v代表的是千米
					this.m = parseInt(v)*1000;
				},
				m:function(v){
					this.km =  parseInt(v)/1000;
				}
			}
		})
	script>
html>

运行结果如图所示：

五、购物车案例


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>title>
	head>
	<body>
		<div id="app">
			<p>购物车p>
			<table>
				<tr>
					<td>物品td>
					<td>单价td>
					<td>数量td>
					<td>小计td>
				tr>
				<tr>
					<td>帽子td>
					<td>{{maoziDanJia}}td>
					<td>
						<input v-model="maoziShuLiang" />
					td>
					<td>{{maoziXiaoJi}}td>
				tr>
				<tr>
					<td>衣服td>
					<td>{{yifuDanJia}}td>
					<td>
						<input v-model="yifuShuLiang" />
					td>
					<td>{{yifuXiaoJi}}td>
				tr>
				<tr>
					<td>裤子td>
					<td>{{kuziDanJia}}td>
					<td>
						<input v-model="kuziShuLiang" />
					td>
					<td>{{kuziXiaoJi}}td>
				tr>
				<tr>
					<td>总价td>
					<td colspan="2">td>
					<td>{{zojia}}td>
				tr>
			table>
		div>
	body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
					maoziShuLiang:1,
					yifuShuLiang:1,
					kuziShuLiang:1,
					maoziDanJia:20,
					yifuDanJia:3000,
					kuziDanJia:700
				}
			},
			computed:{
				// 因为数量 会影响小计,小计不会影响数量,所以使用计算属性
				maoziXiaoJi:function(){
					return parseInt(this.maoziDanJia) * parseInt(this.maoziShuLiang);
				},
				yifuXiaoJi:function(){
					return parseInt(this.yifuDanJia) * parseInt(this.yifuShuLiang);
				},
				kuziXiaoJi:function(){
					return parseInt(this.kuziDanJia) * parseInt(this.kuziShuLiang);
				},
				zojia:function(){
					return parseInt(this.maoziXiaoJi + this.yifuXiaoJi + this.kuziXiaoJi);
				}
			}	
		})
	script>
html>

运行结果如图所示：

六、总结

1.插值

{{文本}}

v-html

v-bind 绑定属性

2.指令

v-if/v-else-if/v-else

v-show & v-if 的区别

v-show是通过display=none去隐藏了这个标签，而v-if 连这个标签的没有了

v-for

3.过滤器

定义：Vue.filter（'filterName',function(value){}）

串联过滤器

过滤器传参

4.计算属性与监听属性

计算属性是一方依赖于另一方

监听属性是 相互依赖，相互影响

相关阅读:
51单片机入门
 【PHP图片托管】CFimagehost搭建私人图床 - 无需数据库支持
 【Linux】 ubuntu ffmpeg环境配置
 为什么需要在微服务中使用链路追踪？Spring Cloud 可以选择哪些微服务链路追踪方案？
pytorch基础学习个人笔记（3）
关于linux与android传输代码tcp -传文件
 容联七陌携手岚时科技，解决医美机构回访3大痛点
 解决 /bin/bash^M: bad interpreter: No such file or directory
C盘满了，应该清理哪些地方
 解决 Android 分享到小程序封面显示不全
原文地址：https://blog.csdn.net/weixin_67465673/article/details/126666592

vue02模板语法

一、插值

1.文本 {{msg}}

2.html

使用v-html指令用于输出html代码

3.属性

4.表达式

5. class 绑定

6.style 绑定

二、指令

核心指令

1.v-if/v-else/if/v-else

2. v-show 与 v-if 的区别

3. v-for

4.v-model 是 数据的双向绑定

v-bind 是 绑定属性

v-on 是 绑定事件

三、过滤器

过滤器的串联

过滤器的传参

四、计算属性与监听属性

1.计算属性

2.监听属性

五、购物车案例

六、总结

1.插值

2.指令

3.过滤器

4.计算属性与监听属性

4.v-model 是数据的双向绑定

v-bind 是绑定属性

v-on 是绑定事件