vue基础语法

最新推荐文章于 2022-11-26 14:54:23 发布

Bugxiu_fu

最新推荐文章于 2022-11-26 14:54:23 发布

阅读量1.2k

点赞数

分类专栏：数据双向绑定 vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Bugxiu_fu/article/details/126908964

版权

vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

数据双向绑定

4 篇文章 0 订阅

订阅专栏

1.v-if |v-else-if|v-else

今天给大家分享一下，vue的基本语法模板，如果哪里不对的地方，欢迎大家指明。

模板语法

1、插值

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

效果展示

HTML代码

     <div id="app">
            <h2>{{dog}},{{ts}}</h2>
            <h1>{{6*8+1}}</h1>
            <h1>{{test?'true':'false'}}</h1>
            <h1>{{1*0?'1':'0'}}</h1>
            <span>{{number+1}}</span>
            <br />
            <span>{{dog.substr(0,5).toLocaleUpperCase()}}</span>
        <p>
            <input type="text" v-bind:id="bookId"/></br>
            <!--动态生成Id-->
            <input type="text" v-bind:id="'bookList_' + id"/>
        </p>
        </div>

vue代码

<script>
			new Vue({
				el:"#app",
				data:function(){
					return{
						dog:"hello，vue",
						ts:new Date().getTime(),
						test:false,
						number:11,
						bookId: 'book001',
						id: 'book002'
					}
					},
			});
			
		</script>

1.1简述表达式语法

Vue里面的插值表达式（双花括号 { { }}）是用来输出data数据的，定义在data里面的数据，可以使用插值表达式来输出：

例如： { { msg }}

1. 为什么双花括号能显示出真实的数据：因为 vue会拿到vue实例所控制DOM区域（#app）里面的标签使用vue的语法去编译它

字面量

<body>
        <div id="box">
            {{ 'abc' }}<!-- 字符串、数字等等 -->
            {{ 123 }}
        </div>
</body>

2.四则运算

<body>
    <div id="box">
            <!-- 插值表达式中可以提供一个简单js语境 -->
            {{ 1+2 }} <!-- 3 -->
            {{ 'hello' + 'word!' }} <!-- helloword -->
            {{ 10*2 }} <!-- 20 -->
    </div>
</body>

3.逻辑运算

<body>
    <div id="box">
            {{  true&&false  }} <!-- false-->
            {{  true || false '  }} <!-- ture -->
            {{  !true  }} <!-- false -->
    </div>
</body>

4.三目运算

<body>
    <div id="box">
            <p>{{ 20 > 18 ? '成年' : '未成年' }}</p> <!-- 成年 --> 
    </div>
</body>

5.全局函数

<body>
    <div id="box">
            <p>{{ Math.random() }}</p>
            <p>{{ parseInt(12.23) }}</p>
    </div>
</body>

1.2 html

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

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

在html中取值

<span v-html="html"></span>

1.3 属性

点击getSelected事件时，设置为蓝色。

  <style>
        .redClass{
            text-align-last: center;
            color: red;
        }
        .blueClass{
            text-align-last: center;
            color: blue;
            }
    </style>
    <p>设置之前:  阿巴阿巴</p>
    <p>设置之后: <span v-bind:class="calzz">阿巴阿巴</span></p>
    <button @click="changColor()">点击改变颜色</button>

vue代码

   <script>
        new Vue({
            el:"#app",
            data:function(){
            return{
            html:"<input type='test' value='hello'>",
            calzz:'redClass',

        }
            },

            methods:{
                changColor(){
                    this.calzz='blueClass'
                }
            }
            
        });
    </script>

1.4 核心指令

1.v-if |v-else-if|v-else

根据其后表达式的bool值进行判断是否渲染该元素，指令特性的值预期是单个 JavaScript 表达式

效果展示

示例：
HTML

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

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

    var vm = new Vue({

        el: '#app',

        data: {
            type: 'C'
        }
    });

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

2.v-show

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

HTML代码

<div v-show="show === 'yes'">
    show == yes
</div>

在data中定义show属性

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

3 v-for

效果展示

循环遍历

遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值, key属性名，index下标

HTML代码

<div id="app">	
		<br><!--数组-->
		<div v-for="(item,index) in items" :value="item.id">
			{{index}} -- {{item.name}} -- {{item.id}}
		</div>
		
		<br><!--对象-->
		<div v-for="(val,key) in obj">
		    {{key}}-{{val}}
		</div>
		
		
		<br><!--循环生成下拉列表-->
		<div>
		    <select >
		        <option v-for="item in items" :value="item.id">{{item.name}}</option>
		    </select>
		</div>
		<br />
		<!--
		循环生成一组多选按钮，v-model通过vue的双向绑定将用户选择的项保存到
		定义的selected组数中
		-->
		<div v-for="(item,index) in items">
		    {{index}}:<input type="checkbox" :value="item.id" v-model="selected">{{item.name}}
		</div>
		<button v-on:click="getSelected()">获取选择</button>

vue代码

<script>
			new Vue({
				el:"#app",
				data:function(){
					return{
						items:[
							{name: 'zs',id:18},
							{name: 'ww',id:19},
							{name: 'ls',id:20},
							{name: 'zl',id:21}						         
						],
						 obj: {
							name:'张三',
							age: 21,
							addr: '湖南长沙'			           
						},
						selected:[]
					}
				},
				methods:{
					getSelected(){
						console.log(this.selected);
					}
				}
				});
		</script>

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

指令简写示例
v-bind:xxx :xxx v-bind:href 简写为 :href
v-on:xxx @xxx v-on:click 简写为 @click

指令	简写	示例
v-bind:xxx	:xxx	v-bind:href 简写为 :href
v-on:xxx	@xxx	v-on:click 简写为 @click

2. 过滤器

局部过滤器的定义：

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

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

注意事项：

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

3、设置计算属性

效果展示

HTML代码

<div id="app">
        <div v-for="(book,index) in books">
            <h1> {{index}} -- {{book.name}} -- {{book.price}}</h1>
        </div>
        <br>
        <div>
            <h1>总价：{{compTotal}}</h1>
        </div>
    </div>

vue代码

<script>
		var vm = new Vue({
		    el: '#app',
		    data: {
		        //定义测试数据
		        books: [
		            {name:'红楼梦', price:"120"},
		            {name:'三国演义', price:"100"},
		            {name:'水浒传', price:"90"},
		        ]
		    },
		    //计算属性
		    computed: {
		        compTotal: function() {
		            let sum = 0;
		            for(index in this.books){
						sum+=parseInt(this.books[index].price)
					}
		            return sum;
		        }
		    }
		
		});
</script>

4、设置监听器

使用场景：我们可以使用监听属性watch来响应数据的变量，当需要在数据变化时执行异步或开销较大的操作时，比如，下拉列表的级联选择

实现数据的双向绑定，1m=100cm

示例：米和厘米的单位换算
HTML中使用v-model实现与数据的双向绑定

<div>
    <!--注意v-model的双向绑定-->
    米:     <input type="text" v-model="m">
    厘米:  <input type="text" v-model="cm">
</div>

vue代码

var vm = new Vue({

    el: '#app',

    data: {
        m: 1,
        cm: 100
    },

    //设置监听属性
    watch: {
        m: function(val) {
            if(val)
                this.cm = parseInt(val) * 100;
            else
                this.cm = "";
        },
        cm: function(val) {
            if(val)
                this.m = parseInt(val) / 100;
            else
                this.m = "";
        }
    }

});