Vue.js基本语法上

                                     艳艳耶✌️：个人主页

                                    个人专栏 ：《Spring与Mybatis集成整合》《springMvc使用》

                                    ⛺️ 生活的理想，为了不断更新自己 !

 

目录

1.插值

1.1 文本

1.2 v-v-html

1.3 数据双向绑定数据(v-model)

1.4 属性（v-bind）

1.5 表达式

1.6 class绑定

1.7 style绑定

1.8复选框

1.9下拉框

2.指令

2.1  v-if|v-else|v-else-if

2.2  v-show 

2.3  v-for

2.4  动态参数

3.过滤器

3.1.局部过滤器

3.2.全局过滤器

4.计算属性&监听属性

4.1.计算属性

4.2.监听属性

5.购物车案列（简单版本）

今日分享就结束！！！

---

1.插值

1.1 文本

插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

语法：{{ 变量名/对象.属性名 }}

文本
 {{msg}} 

结果： 

1.2 v-v-html

v-html专门用来展示数据, 其作用和插值表达式类似但可以避免插值闪烁问题。

当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。

​ 插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据.

语法：

html解析
 {{msg2}}
 

区别：

• v-text/{{变量名/对象.属性名}}：把数据当作纯文本显示.
• v-html：遇到html标签,会正常解析

1.3 数据双向绑定数据(v-model)

Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

注意：

双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等
文本框/单选按钮/textarea, 绑定的数据是字符串类型
单个复选框, 绑定的是boolean类型
多个复选框, 绑定的是数组
select单选对应字符串，多选对应也是数组

1.4 属性（v-bind）

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

代码：

	
		
	     
		
		
		
	
	
		

			
			
html解析
 {{msg2}}

			
			
		
		
		
	

结果：

1.5 表达式

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

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

          {{ number + 1 }}

          {{ ok ? 'YES' : 'NO' }}

         

我的Id是js动态生成的

代码：

           
表达式
 
			{{num+1}}
			{{warn.substr(0,6)}}
			
			{{ok==1? '闪开' :'不闪开'}}

            num:6,
			warn:'公主驾到通通闪开',
			ok:1

结果：

1.6 class绑定

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

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

代码：

	
		
	     
		
		
		
	
	
		

			
			
html解析
 {{msg2}}

			
			
		
		
		
	

结果：

1.7 style绑定

  v-bind:style="expression"

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

代码：

	
		
	     
		
		
		
	
	
		

			
			
html解析
 {{msg2}}

			
			
		
		
		
	

结果：

1.8复选框

代码：

	
		
		
		
		
	
	
		

			
			
			
		
			
			 
			 
多选框
			

			{{h.name}}
			
			
			
		
		
		
	

结果：

1.9下拉框

代码：

	
		
		
		
		
	
	
		

			
			
			
		
			
			
下拉框
 
			
				{{h.name}}
			 
			
			
			
			
		

结果：

 

2.指令

2.1  v-if|v-else|v-else-if

根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

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

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

代码：

	
		
		
		
		
	
	
		

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

			不及格
			及格
			一般
			良好
			优秀
			
			
			
			
			
		
		
		
	

结果：

2.2  v-show 

v-show指令与v-if指令类似，用于根据表达式的值来控制元素的显示和隐藏。当v-show指令的表达式的值为false时，元素会被渲染为不可见状态，并且会添加CSS样式"display:none"。这意味着该元素在页面上不会占据空间，并且不会显示给用户。

然而，v-show指令与加载出页面是不同的。当使用v-if指令时，如果条件为false，对应的元素将从DOM中完全移除，并且不会加载到页面上。

代码：

展示
展示

2.3  v-for

 类似JS的遍历

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

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

语法：

	
		
		
		
		
	
	
		

			
			
			
			
			
v-for
			{{a}}   
			{{a.name}}  
			
			
			
			
		
		
		
	

结果：

2.4  动态参数

 从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数

  ...

  同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

  ...

代码：

	
		
		
		
		
	
	
		

			
			
			
		
			
			
			
			
动态参数
			
			点我
		
		
		
	

结果：

3.过滤器

3.1.局部过滤器

代码：

	
		
		
		
		
		
	
	
		

			
局部过滤器基本应用
			{{msg}}

			{{msg | filterA}}
			
			
全局过滤器
			{{time}}

			{{time | fmtDateFilter}}
		
		
		
	

结果：

注意：

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

• 过滤器可以串联     

  {{ message | filterA | filterB }}

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

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

• js定义一个类

  function Stu(){};

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

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

3.2.全局过滤器

代码：

date.js

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

结果：

4.计算属性&监听属性

4.1.计算属性

计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用

代码：

{

	
		
	     
		
		
	
	
		

			
计算属性
 
			单价：
			数量：
			小计：{{count}}
		
		
		
	

结果：

4.2.监听属性

 watch可以监听简单属性值及其对象中属性值的变化

​ watch类似于onchange事件,可以在属性值修改的时候,执行某些操作

代码：

	
		
	     
		
		
	
	
		

			
			
监听属性
 
			千米：

			米：
		
		
		
	

结果：

5.购物车案列（简单版本）

代码：

	
		
		
		
		
	
	
		

			
购物车
			

				

				

					
商品
					
单价
					
数量
					
小计
				
	
				
				
				

					

						
炸鸡
						
{{priceA}}
						

							-
							{{numA}}
							+
						
						
{{countA}}
					
					

						
炸薯条
						
{{priceB}}
						

							-
							{{numB}}
							+
						
						
{{countB}}
					
					

						
汉堡
						
{{priceC}}
						

							-
							{{numC}}
							+
						
						
{{countC}}
					
				
				

					

						
总价：
						
{{total}}
					
				
			
		
		
		
	

结果：

今日分享就结束！！！