Vue 快速入门之第二章基础语法1

拼搏现实的明天。 2024-04-08 10:45 107阅读 0赞

**目录**

一：模板语法

html模板语法： 这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。

二：插值

①：文本

②： html

③：属性

④：表达式

三：指令

①： v-if |v-else-if|v-else

②：v-show

③：v-for

④： v-on|v-model|v-for

⑤： 参数 v-bind:href,v-on:click

⑥：简写

四：过滤器

vue允许自定义过滤器，一般用于常见的文本格式化，过滤器可用的两个地方：双花括号插值与v-bind表达式，过滤器应该被添加在js表达式的尾部，使用管道运算符"|"①： 局部过滤器

②： 全局过滤器

五：计算属性

六：监听属性

--------------------

### 一：模板语法 ###

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

#### html模板语法：   这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。 ####

### 二：插值 ###

#### ①：文本 ####

使用\{ \{msg\}\}的形式，标签将会被替换成为数据对象（data）上**msg**属性值，当绑定的数据对象上的**msg**属性值发生变化时，插值处的值也会发生变化（双向绑定）

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		
    		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    	</head>
    	<style>
    		.cl{
    			color: red;
    		}
    	</style>
    	<body>
    		
    		<div id="a">
    			<h1>{
       {ts}}</h1>
    			<h2>插值</h2>
    	
    				<li>文本</li>
    				<span>
    					{
       {msg}}
    				</span>
    		</div>
    	</body>
    	<script>
    		//每一个Vue实例都是从new构造函数开始
    		var vm=new Vue({
    			el:'#a',
    			data:{
    				ts:new Date().getTime(),
    				msg:'Hello vue!!!',
    			
    			},
    			methods:{
    				
    			}
    			
    		});
    				
    	</script>
    	
    </html>

效果展示：

![842978d2b0af40f2873f1327b1f0287a.png][]

#### ②： html ####

\{ \{\}\}的方式将数据处理为普通文本，如果要输出html，需要使用**v-html**指令  
示例：  
在data中定义一个html属性，其值为html

data: {
        html:  '<input type="text" value="hello"/>'
    }

在html中取值

#### ③：属性 ####

HTML属性中的值应使用v-bind指令。类型与jQuery中的$("\#xxx").attr(propName, propVal)  
示例，以修改元素的class属性为例：  
定义一个样式

在data中定义一个属性，其值为上面定义的样式名

data: {
        red: 'redClass'
    }

在html使用v-bind指令设置样式

####  ####

#### ④：表达式 ####

几种常见的表达式：

*  \{ \{str.substr(0,6).toUpperCase()\}\}
 *  \{ \{ number + 1 \}\}
 *  \{ \{ ok ? 'YES' : 'NO' \}\} 三元运算符
 *  <li v-bind:>我的Id是js动态生成的</li>

**示例1：**.在html中加入元素，定义表达式

<span>{
       {str.substr(0,6).toUpperCase()}}</span>

在data中加入一个属性，名为str与html中对应

data: {
        str: 'hello vue'
    }

**示例2：**

<span>{
       { number + 1 }}</span>

在data中加入一个属性，名为str与html中对应

data: {
        number: 10
    }

在data中定义的number值将会被加1

**示例3：**  
这是一个三元运算，如果ok为true，表达式值为**YES** ，如果ok为false则表达式值为**NO**

在data中加入一个属性，名为str与html中对应

data: {
        ok: true
    }

**示例4：**  
演示id属性绑定和动态赋值

data: {
        bookId: 'book001',
        id: 'book002'
    }

### 三：指令 ###

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

#### **①： v-if |v-else-if|v-else** ####

根据其后表达式的bool值进行判断是否渲染该元素， 指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)  
示例：  
HTML

<div v-if="type === 'A'">
        type == A
    </div>
    <div v-else-if="type === 'B'">
        type == B
    </div>
    <div v-else>
        other value
    </div>

var vm = new Vue({
    
            el: '#app',
    
            data: {
                type: 'C'
            }
        });

可以修改data中的type值观察页面的输出。

> 注： js = == === 之间的区别  
> 一个等号是赋值操作，==先转换类型再比较，===先判断类型，如果不是同一类型直接为false  
> alert(1 == “1”); // true  
> alert(1 === “1”); // false

#### ②：v-show ####

与v-if类似，只是不会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"。  
当v-show 表达式**true**则显示，否则不显示。  
**注意：使用v-show，虽然不显示，但在页面的dom中是存在的，只是display属性为none**  
示例： 在HTML中加入如下内容

在data中定义show属性

var vm = new Vue({
        el: '#app',
        data: {
            show: 'yes' 
        }
    });

#### **③：v-for** ####

循环遍历

*  遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
 *  遍历对象: v-for="(value,key,index) in stu", value属性值, key属性名，index下标  
    示例：  
    定义一个div，使用v-for指令输出，items是vue实例中data中定义的对象数组

<div v-for="item in items">
         {
       {item.name}} -- {
       {item.id}}
    </div>
    
    
    <div>
        <select >
            <option v-for="item in items" 
                v-bind:value="item.id">{
       {item.name}}</option>
        </select>
    </div>
    
    
    <div v-for="(o,key) in obj">
        {
       {key}}-{
       {o}}
    </div>

var vm = new Vue({
    
        el: '#app',
    
        data: {
            itmes:[
                {name: 'zs',age:18},
                {name: 'ww',age:19},
                {name: 'ls',age:20},
                {name: 'zl',age:21}
            ],
            obj: {
                name:'张三',
                age: 21,
                addr: '湖南长沙'
            }
        }
    });

#### **④： v-on|v-model|v-for** ####

创建一组多选框，可以获取到用户选择项

<div v-for="(item,index) in items">
        {
       {index}}:<input type="checkbox" v-bind:value="item.id"
                v-model="selected">{
       {item.name}}
    </div>
    <button v-on:click="getSelected()">获取选择</button>

var vm = new Vue({
    
        el: '#app',
    
        data: {
            type: 'C',
            show: 'no',
            items:[
                {name: '长沙',id:18},
                {name: '昆明',id:19},
                {name: '武汉',id:20},
                {name: '南京',id:21}
            ],
            obj: {
                name:'张三',
                age: 21,
                addr: '湖南长沙'
            },
            selected:[]
        },
        methods: {
            getSelected: function() {
                console.log(this.selected);
            }
        }
    });

#### **⑤： 参数 v-bind:href,v-on:click** ####

示例：

<div>
        <a v-bind:href="url">baidu</a>
    </div>
    
    
    <div>
        <a v-bind:[attrname]="url">baidu</a>
        <button v-on:[evname]="clickme">点我看看</button>
    </div>

**注意：在动态参数中，作为参数的变量名（如：attrname）要全部小写，否则无效 ！！**

var vm = new Vue({
    
        el: '#app',
    
        data: {
    
            url: 'https://www.baidu.com',
            attrname:'href',
            evname: 'click'
        },
    
        methods: {
            clickme: function() {
                console.log("点到我了");
            }
        }
    
    });

#### ⑥：简写 ####

Vue为v-bind和v-on这两个最常用的指令，提供了特定简写

<table> 
 <thead> 
  <tr> 
   <th>指令</th> 
   <th>简写</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>v-bind:xxx</td> 
   <td>:xxx</td> 
   <td>v-bind:href 简写为 :href</td> 
  </tr> 
  <tr> 
   <td>v-on:xxx</td> 
   <td>@xxx</td> 
   <td>v-on:click 简写为 @click</td> 
  </tr> 
 </tbody> 
</table>

### 四：过滤器 ###

#### vue允许自定义过滤器，一般用于常见的文本格式化，过滤器可用的两个地方：**双花括号插值**与**v-bind表达式**，过滤器应该被添加在js表达式的尾部，使用管道运算符"|"      ①： 局部过滤器 ####

局部过滤器的定义：

var vm = new Vue({
        filters: {
            'filterName': function(value) {
                //过滤器实现
            }
        }
    });

过滤器的使用

{
       { name | capitalize }}
    
    
    <div v-bind:id="rawId | formatId"></div>

*  注1：过滤器函数接受表达式的值作为第一个参数
 *  注2：过滤器可以串联  
    \{ \{ message | filterA | filterB \}\}
 *  注3：过滤器是JavaScript函数，因此可以接受参数：  
    \{ \{ message | filterA('arg1', arg2) \}\}

示例：

<div>
        <p>{
       {msg | toUpperCase}}</p>
    </div>

var vm = new Vue({
    
        el: '#app',
    
        data: {
            msg:"hello vue"
        },
    
        //局部过滤器
        filters:{
            toUpperCase: function(value) {
                return value.toUpperCase();
            }
        }
    
    });

#### ②： 全局过滤器 ####

拷入date.js（日期格式化）放入项目js目录中，在页面中引入。  
定义全局过滤器

//全局过滤器
    Vue.filter('fmtDate',function(value) {
        return fmtDate(value, 'yyyy年MM月dd日')
    });

过滤器的使用

<div>
        <p>{
       {date | fmtDate}}</p>
    </div>

### 五：计算属性 ###

计算属性用于快速计算视图（View）中显示的属性，这些计算将被缓存，并且只在需要时更新  
使用场景：当一个属性需要复杂的逻辑运算之后才能获取其值，可以使用计算属性，在一个计算属性中可以完成各种复杂的逻辑，包括运算，方法调用等，只要最终返回一个结果就可以了  
声明计算属性的格式：

computed:{
       xxx:function(){
    
       }
    }

示例： 使用计算属性，计算书本的总价  
定义测试数据，和计算属性，计算属性遍历书本记录，计算总价

计算属性在页面中的使用

<div v-for="book in books">
        {
       {book.name}} -> {
       {book.price}}
    </div>
    
    <div>
        总价：{
       {compTotal}}
    </div>

关于**var** 与 **let**

*  var声明为全局属性
 *  let为ES6新增，可以声明块级作用域的变量（局部变量）
 *  建议使用let声明变量

###  ###

### 六：监听属性 ###

使用场景：我们可以使用监听属性watch来响应数据的变量， 当需要在数据变化时执行异步或开销较大的操作时，这种方式比较有用。回想一下是否做过下拉列表的级联选择？

watch声明语法:

watch: {
        xxxx: function(val) {
            //监听器实现
        }
    }

示例： 米和厘米的单位换算  
设置监听器：

HTML中使用v-model实现与数据的双向绑定

[842978d2b0af40f2873f1327b1f0287a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/14ef7db6a8334798b344481525d4a6e3.png