0
点赞
收藏
分享

微信扫一扫

Vue基础语法（一）

得一道人 2022-04-30 阅读 69
vue.jsjavascriptelementui

一、模板语法

1.插值

文本

 {{msg}}

 示例：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
				</span>
			</ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
				}
			},
			methods:{
				
			}
		})
	</script>
</html>

显示：

html

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

示例：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: pink;
		}
	</style>
	<body>
		<div id="zhq">
			<h1>{{title}}</h1>
			<h2>插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
				</span>
				
				<li>html</li>
				<span v-html="html"></span>
			</ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
					html:'<input type="text" value="2"/>',
				}
			},
			methods:{
				
			}
		})
	</script>
</html>

显示：

属性

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

示例：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: pink;
		}
	</style>
	<body>
		<div id="zhq">
			<h1>{{title}}</h1>
			<h2>插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
				</span>
				
				<li>html</li>
				<span v-html="html"></span>
				
				<!-- 
				 1.v-model:数据双向绑定
				 2.v-biand:绑定标签属性值  例：v-bind:css  v-bind:id
				 3.{{}}:插值，针对标签中的文本值进行操作
				 -->
				<li>v-bind绑值</li>
				<span v-bind:class="cls" v-bind:id="123">
					我变色了
				</span>
			</ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
					html:'<input type="text" value="2"/>',
					cls:'cl',
				}
			},
			methods:{
				
			}
		})
	</script>
</html>

显示：

表达式

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

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: pink;
		}
	</style>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
				</span>
				
				<li>html</li>
				<span v-html="html"></span>
				
				<!-- 
				 1.v-model:数据双向绑定
				 2.v-biand:绑定标签属性值  例：v-bind:css  v-bind:id
				 3.{{}}:插值，针对标签中的文本值进行操作
				 -->
				<li>v-bind绑值</li>
				<span v-bind:class="cls" v-bind:id="123">
					我变色了
				</span>
				
				<li>表达式</li>
				<span>
					{{msg.substr(0,6).toUpperCase()}}<br />
					{{ number + 1 }}<br />
					{{ ok ? 'YES' : 'NO' }}
					<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
				</span>
				
			</ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
					html:'<input type="text" value="2"/>',
					cls:'cl',
					number:1,
					ok:true,
					id:22,
				}
			},
			
			methods:{

			}
		})
	</script>
</html>

显示：

2.指令

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

核心指令

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

代码：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{title}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-if / v-else / v-else-if</li>
				<span v-if="sex=='boy'">
					我是男的
				</span>
				<span v-else-if="sex=='girl'">
					我是女的
				</span>
				<span v-else>
					我是男的还是女的？
				</span>
            </ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					sex:'gay',
				}
			},
			methods:{
			}
		})
	</script>
</html>

显示： 

当sex=boy时：

 当sex=girl时:

当sex=gay时： 

 

v-show

代码：

<li>v-show和v-model</li>
<div>
	<input type="checkbox" v-model="flag" />已阅读该协议
	<div v-show="flag">
			嗨害,我出来了
	</div>
</div>

<!-- 在data中定义一个flag -->
flag:false,

 效果：

 

v-for

代码：

		<div id="zhq">
			<h1>{{title}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-if / v-else / v-else-if</li>
				<span v-if="sex=='boy'">
					我是男的
				</span>
				<span v-else-if="sex=='girl'">
					我是女的
				</span>
				<span v-else>
					我是男的还是女的
				</span>
				
				<li>v-show和v-model</li>
				<div>
					<input type="checkbox" v-model="flag" />已阅读该协议
					<div v-show="flag">
						嗨害,我出来了
					</div>
				</div>
				
				<li>v-for/v-model/v-bind/{{}}</li>
				<div v-for="(d,i) in arrays">
					i={{i}},d={{d}}
				</div>
		
				<div>
					<select>
						<option value="">--请选择--</option>
						<option v-for="d in depts" v-bind:value="d.id">
							{{d.name}}
						</option>
					</select>
				</div>

				<span v-for="a in depts">
					<input type="checkbox" v-bind:value="a.id" v-model="dt"/>{{a.name}}
				</span><br />
				<span v-if="dt.length!=0">
					{{dt}}
				</span>
			</ol>
		</div>


			data:function(){
				return{
					ts:new Date().getTime(),
					sex:'gay',
					flag:false,
					depts:[
						{id:1,name:'研发部'},
						{id:2,name:'调研部'},
						{id:3,name:'人事部'},
						{id:4,name:'客服部'}
					],
					dt:[],
					arrays:[1,2,3,4,5],
				}
			},

效果：

 

 

 

v-model

在Vue入门篇有讲解

参数、动态参数、简写

代码：

            <li>参数、动态参数、简写</li>
				<span>
					<!-- <a href="http://www.baidu.com">百度</a><br /> -->
					<a v-bind:[attrname]="url">百度</a><br />
					<a v-on:[eventname]="doClick">点我</a><br />
					<!-- 简写 -->
					<!-- 
					 v-on:简写变成@
					 v-bind:简写变成：
					 -->
					<a :href="url">百度</a><br />
					<a @click="doClick">点我</a>
				</span>

        var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					sex:'gay',
					flag:false,
					depts:[
						{id:1,name:'研发部'},
						{id:2,name:'调研部'},
						{id:3,name:'人事部'},
						{id:4,name:'客服部'}
					],
					dt:[],
					arrays:[1,2,3,4,5],
					url:'http://www.baidu.com',
					attrname:'href',
					eventname:'dblclick',
				}
			},
			
			methods:{
				doClick(){
					alert(111);
				}
			}
		})

 效果：

 

二、过滤器

全局过滤器

局部过滤器

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

  •    注1：过滤器函数接受表达式的值作为第一个参数 
  •    注2：过滤器可以串联     
          {{ message | filterA | filterB }}
  •    注3：过滤器是JavaScript函数，因此可以接受参数： 
          {{ message | filterA('arg1', arg2) }}
  •    注4：js定义一个类
           function Stu(){};
           Stu.prototype.add(a,b){};//添加一个新的实例方法

案例

首字母大写/日期格式化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>过滤器（全局，局部）</h2>
			<div>
				<!-- 局部过滤器 -->
				{{title|strFilter}}<br/>
				<!-- 全局过滤器 -->
				{{dt|dateFilter|strFilter}}
			</div>
		</div>
	</body>
	<script>
		//全局过滤器
		Vue.filter('dateFilter',function(v){
			return fmtDate(v,'yyyy年MM月dd日')
		});
		
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					title:'hello vue!!',
					dt:new Date(),
				}
			},
			
			methods:{
				
			},
			//局部过滤器
			filters:{
				strFilter:function(v){
					return v.substr(0,6).toUpperCase();
				}
			},
		})
	</script>
</html>

效果：


三、计算属性

案例

成绩的总分

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>计算属性</h2>
				<div v-for="s in score">
					编号={{s.id}},科目={{s.name}},成绩={{s.sc}}
				</div>
				<span >总分：{{sum}}</span>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					score:[
						{id:1,name:'语文',sc:110},
						{id:2,name:'数学',sc:90},
						{id:3,name:'英语',sc:90},
						{id:4,name:'物理',sc:100}
					],
				}
			},
			
			methods:{
				
			},
			computed:{
				sum:function(){
					let s=0;
					for(let sc of this.score)
						s+=sc.sc;
						return s;
				}
			}
		});
	</script>
</html>

效果：


   
四、监听属性

案例

kb/mb转换器

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>监听属性</h2>
				kb:<input type="text" v-model="kb" /><br />
				mb:<input type="text" v-model="mb" />
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					kb:1024,
					mb:1
				}
			},
			
			methods:{
				
			},
			watch:{
				//监听属性必须保证属性是存在的
				kb:function(v){
					this.mb=v/1024;
				},
				mb:function(v){
					this.kb=v*1024;
				}
			}
		});
	</script>
</html>

效果：

 

小结：计算属性和监听属性的区别

 自己的理解

  • computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
  • computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，

  与watch之间的区别：

刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：

那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?

举报

相关推荐

Vue基础语法

插槽Vuecss代码人生

Vue的基础语法

vue.js前端

Vue基础语法【下】

爬虫selenium测试工具

Vue基础语法(细节)

vue.js前端javascript

Vue基础语法——02

vue.jsjavascript前端

vue的基础语法（一）数据指令绑定

vue.js前端javascript

Vue基础知识(一) - 插值语法

日记本vueVue前端开发那些事儿前端开发

Vue基础一文速通（基础语法篇）

vue.js前端javascript

【Vue】基础系列（二）Vue模板语法-插值语法-指令语法

vue.js前端javascripthtml插值编程语言

Vue学习笔记（基础语法）

vue.js学习前端
0 条评论