• vue模板语法上集

    在这里插入图片描述

    目录

    本次目标

    1. 插叙
    2. 指令
    3. 过滤器
    4. 计算属性&监听器

    一、插值

    1.1 文本

    {{msg}}

    • 1
    DOCTYPE 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 蛤蟆鸡窝'
				}
			}
		})
	script>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述

    1.2 html

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

    在上面代码中的div和vue实例中添加相对应的例子：
    div中：

    <p>-----html页面转义-----p>
<div v-html="htmlstr">div>

    • 1
    • 2

    new vue中：

    htmlstr:'<span style="color:red;">谢利小鸡span>',

    • 1

    在这里插入图片描述

    1.3 属性

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

    div中：

    <p>v-bind 属性绑定p>
			
			<input value="蛤蟆鸡" />
			<input v-bind:value="valuestr" />
			<input :value="valuestr" />

    • 1
    • 2
    • 3
    • 4
    • 5

    new vue中：

    <script type="text/javascript">
	new Vue({
				el:'#app',
				data(){
					return{
						valuestr:'红烧廖鸡',
					}
				}
			})
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    1.4 表达式

    Vue提供了完全的JavaScript表达式支持
    {{str.substr(0,6).toUpperCase()}}
    {{ number + 1 }}
    {{ ok ? ‘YES’ : ‘NO’ }}

     <li v-bind:id="'list-' + id">我的Id是js动态生成的li>

    • 1
    DOCTYPE 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>
		.a {
			color: yellow;
		}
		style>
	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中可以对变量进行二次处理-----p>
			{{str.substring(0,4)}}<br />
			{{num + 4}}<br />
			{{ok ? '1' : '0'}}<br />
			<span :id="idstr+'id'">书籍信息span><br />
			<p>-----class绑定-----p>
			<span :class="classStr">文本类容span>
			<p>-----style绑定-----p>
			<span :style="styleStr">文本类容span>
			
		div>
	body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
					msg:'hello 蛤蟆鸡窝',
					htmlstr:'谢利小鸡',
					valuestr:'红烧廖鸡',
					str:'小小廖鸡爱吃鸡粪',
					num:6,
					ok:false,
					idstr:'book_',
					classStr:'a',
					styleStr:'color:blue'
				}
			}
		})
	script>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    在这里插入图片描述

    二、指令

    指的是带有“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：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   
	v-for/v-model一起绑定[多选]复选框和单选框 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
	head>
	<body>
		
		<div id="app">
			<p>v-if|v-else|v-else-ifp>
			分数：<input v-model="score" />
			<div v-if="score>80">优秀div>
			<div v-else-if="score>60">良好div>
			<div v-else="score<60">还需努力div>
			
			<p>v-showp>
			<div v-show="score>90">v-show-上优秀学员名单div>
			<div v-if="score>90">v-if-上优秀学员名单div>
			
			<p>v-forp>
			<select v-model="hobbySelected">
				<option v-for="h in hobby" :value="h.id">{{h.name}}option>
			select>
			<div v-for="h in hobby">
			<input :value="h.id" type=checkbox />{{h.name}}
			div>
			<p>v-onp>
			<button v-on:click="handle">触发事件button>
			<button @click="handle">触发事件222button>
			
		div>
	body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					// ctrl+k格式化
					score:78,
					hobby:[
						{id:"1",name:"小廖鸡"},
						{id:"2",name:"谢利鸡"},
						{id:"3",name:"是狗"}
					],
					hobbySelected:3
				};
			},
			methods:{
				handle(){
					alert("触发事件");
				}
			}
		})
	script>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58

    在这里插入图片描述

    三、过滤器

    过滤器
    全局过滤器
    Vue.filter(‘filterName’, function (value) {
    // value 表示要过滤的内容
    });
    局部过滤器
    new Vue({
    filters:{‘filterName’:function(value){}}
    });

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

    
{{ name | capitalize }}


<div v-bind:id="rawId | formatId">div>

 

	{{ message | filterA | filterB }}

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


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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
	head>
	<body>
		
		<div id="app">
			{{msg|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
		div>
	body>
	<script type="text/javascript">
		// 全局过滤器
		Vue.filter('all', function(value) {
			return value.substring(1, 4);
		});
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					msg:"写谢利波我记载"
				};
			},
			methods: {
				handle() {
					alert("触发事件");
				}
			},
			filters:{
				'single':function(val){
					return val.substring(2,3);
				},
				'param':function(val,start,end){
					return val.substring(start,end);
				}
			}
		})
	script>
html>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    在这里插入图片描述

    四、计算属性&监听器

    计算属性
    计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
    computed:{}

    监听属性
    监听属性 watch，我们可以通过 watch 来响应数据的变化
    watch:{}

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
	head>
	<body>
		
		<div id="app">
			<p>计算属性p>
			<table border="1" style="width: 600px;height: 300px;">
				<tr>
					<td>物品td>
					<td>单价td>
					<td>
						数量
					td>
					<td>
						小计
					td>
				tr>
				<tr>
					<td>谢利鸡翅td>
					<td>{{maoziDanjia}}td>
					<td>
						<input v-model="maozi" />
					td>
					<td>
						{{maoziTotal}}
					td>
				tr>
				<tr>
					<td>香辣廖鸡腿td>
					<td>{{yifuDanjia}}td>
					<td>
						<input v-model="yifu" />
					td>
					<td>
						{{yifuTotal}}
					td>
				tr>
				<tr>
					<td>廖鸡全家餐td>
					<td>{{kuziDanjia}}td>
					<td>
						<input v-model="kuzi" />
					td>
					<td>
						{{kuziTotal}}
					td>
				tr>
				<tr>
					<td>总价td>
					<td colspan="3">{{total}}td>
				tr>
			table>
			<p>监听属性p>
			千米：<input v-model="km" />
			米：<input v-model="m" />
		div>
	body>
	<script type="text/javascript">
		// 全局过滤器
		Vue.filter('all', function(value) {
			return value.substring(1, 4);
		});
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					maoziDanjia:10,
					yifuDanjia:30,
					kuziDanjia:20,
					maozi:1,
					yifu:1,
					kuzi:1,
					km:2,
					m:2000
				};
			},
			methods: {
				handle() {
					alert("触发事件");
				}
			},
			computed:{
				maoziTotal(){
					return this.maoziDanjia*this.maozi;
				},
				yifuTotal(){
					return this.yifuDanjia*this.yifu;
				},
				kuziTotal(){
					return this.kuziDanjia*this.kuzi;
				},
				total(){
					return this.maoziTotal+this.yifuTotal+this.kuziTotal;
				}
			},
			watch:{
				// v指的是m变量
				m: function(v){
					this.km = parseInt(v)/1000;
				},
				// v指的是km变量
				km: function(v){
					this.m = parseInt(v)*1000;
				}
			}
		})
	script>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115

    在这里插入图片描述

    ​

  • 相关阅读:
    网络学习：BGP路径属性分类
    C. Johnny and Another Rating Drop(思维+二进制位)
    如何保护您的工业网络？
    题解：P9426 [蓝桥杯 2023 国 B] 抓娃娃
    ai智能生成文章-智能生成文章软件
    【SpringBoot学习】46、SpringBoot 集成 Uniapp 实现微信公众号授权登录
    java设计模式3，里氏替换原则
    【Unity入门计划】了解C#或Unity中的类和对象
    【排序15：多数元素 II】
    基于JAVA后台微信校园疫情防控小程序系统 开题报告
  • 原文地址：https://blog.csdn.net/weixin_63531940/article/details/126668664