Vue.js实战梁笔记01（第1-2章）表达式，指令，钩子，过滤器，语法糖

于 2021-01-03 19:30:36 发布
阅读量248 收藏 2
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/112062289
版权
1、初识Vue
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/my.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="navigator">
			<ul>
				<li v-for="tab in navigator">
					{{tab.text}}
				</li>
			</ul>
		</div>
		<script>
			new Vue(
			{
				el:"#navigator",
				data:{
					navigator:[
						{text:'北京'},
						{text:'上海'},
						{text:'黑龙江'},
						{text:'内蒙古'},
						{text:'四川'},
						{text:'西藏'}
					],
					page:"人民的名义"
				}
			}
			
			);
			
		</script>
	</body>
</html>
2、插值
  • 使用mustache语法，即双大括号{{ }}
  • 只需渲染一次，不在关心数据变化使用*
<span>text:{{*text}}
  • 处理html标签使用仨个大括号{{{ }}}
<div>logo:{{{logo}}}</div>
logo:'<span>pku</span>'
  • 在标签内部使用双括号
<div data-id="{{id}}"></div>
3、表达式

表达式后面可以添加过滤符，返回字符串的全大写形式，允许过滤器串联，也允许过滤器带参数

  • 允许过滤器串联
{{example |过滤器A | 过滤器 B}}
  • 过滤器带参数
 - {{example | 过滤器A 参数 a，参数b}}
4、指令

指令是特殊的带有前缀v-的特性，指令的值限定为绑定表达式，指令的职责就是当其表达式的值改变时，把某些特殊的行为应用到dom上。

<div v-if='true'>dddd</div>

指令和表达式之间用冒号分割，如v-bind

5、v-if指令

v-if后面没有使用mustache语法绑定，根据isdisplay的值来向html插入一个标签
v-if是惰性的，初始渲染时条件如果为假，则说明都不做，直到第一次为真的时候再做

<!DOCTYPE html>
<html>
    <head>
<script src="vue.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="address" v-if="isdisplay">北京市海淀区</div>
        <script type="text/javascript">    
        new Vue({
            el:"#address",
            data:{
                isdisplay:false,
            }

        });
        </script>
    </body>
</html>

template包装

<!DOCTYPE html>
<html>
    <head>
<script src="vue.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="address" >
            <template v-if="isdisplay">this is templaet</template>
            <div v-if="isshow">how about show</div>
        </div>
        <script type="text/javascript">    
        new Vue({
            el:"#address",
            data:{
                isdisplay:true,
                isshow:true,
            }

        });
        </script>
    </body>
</html>
6、v-show指令

实际上和v-if基本一致，如果v-show的值为真，则显示，反之则不显示，
v-show始终会被编译

<!DOCTYPE html>
<html>
    <head>
<script src="vue.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="address" v-show="isdisplay">北京市海淀区</div>
        <script type="text/javascript">    
        new Vue({
            el:"#address",
            data:{
                isdisplay:false,
            }

        });
        </script>
    </body>
</html>
7、v-else指令
<html>
    <head>
<script src="vue.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="fengray">
            <div v-if="isdisplay">when if is true</div>
            <div v-else>then else</div>
            <div v-if="Math.random()>0.5"> random is bigger then 0.5</div>
            <div v-else>random is smaller then 0.5</div>
        </div>
        <script type="text/javascript">    
        new Vue({
            el:"#fengray",
            data:{
                isdisplay:true,
                isshow:true,
            }

        });
        </script>
    </body>
</html>
8、v-modle指令 （双向绑定）

用于控件的绑定，自动判断是哪一类控件，并绑定到相应的vue对象数据中去，起作用的主要是input，select，text，checkbox，radio等表单空间元素

在输入框输入文本的同时，可以直接写入到页面。一方面绑定到数据层，一方面绑定到表现层

<html>
    <head>
<script src="vue.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="fengray">
            <form action="#">
                <label>name</label><input type="text" v-model="formdata.name"/><br>
                <label for="male">male</label><input type="radio" v-model="formdata.gender" value="one"/><br>
                <label for="female">female</label><input type="radio" v-model="formdata.gender" value="two"/><br>
                <label>interest</label><br>
                <lable for="read">read</lable>
                <input type="checkbox" value="read" v-model="formdata.interest" /><br>
                <lable for="sport">sport</lable>
                <input type="checkbox" value="read" v-model="formdata.interest" /><br>
                <lable for="sing">sing</lable>
                <input type="checkbox" value="read" v-model="formdata.interest" /><br>
                <input type="submit" value="submit">
                <select v-model="formdata.identity">
                    <option value="teacher" selected>teahcer</option>
                    <option value="doctor">doctor</option>
                    <option value="layer">lawyer</option>
                </select>
            </form>
        </div>
        <script type="text/javascript">    
        new Vue(
            {
                el:"#fengray",
                data:{
                    formdata:{
                        name:"zhangsan",
                        gender:"two",
                        interest:["read","sport","read"],
                        identity:'doctor'
                    }
                }
            }
        );
        </script>
    </body>
</html>
9、v-model指令的参数

  • 1、number
    将用户输入的值自动地转换为Number类型

  • 2、lazy
    同步数据的时候，讲用户的输入改到change事件发生的时候，类似于懒加载

 <html>
    <head>
<script src="vue.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="fengray">
            <form action="#">
                <input type="text" v-model="msg" lazy/><br/>
                {{msg}}<br/>//在change事件之后才和输入框同步

            </form>
        </div>
        <script type="text/javascript">    
        new Vue(
            {
                el:"#fengray",
                data:{
                    msg:'content change is after onchange event',
                }
            }
        );
        </script>
    </body>
</html>
  • 3、debounce
    设置一个最小延时，等到延时结束之后再同步数据
<html>
    <head>
<script src="vue.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="fengray">
            <form action="#">
                <input type="text" v-model="msg" debounce="5000"/><br/>//清空输入框5秒后，下面的msg才被清空，上机无法实现
                {{msg}}<br/>

            </form>
        </div>
        <script type="text/javascript">    
        new Vue(
            {
                el:"#fengray",
                data:{
                    msg:'hello world',
                }
            }
        );
        </script>
    </body>
</html>
10、实例与数据
  • 1.通过构造函数创建一个Vue的根实例

var app=new Vue( { } );

  • 2.必不可少的一个选项就是el，el指定页面中已存在的Dom元素来挂载Vue实例。通过id来挂载。实际上可以是HTMLElement，也可以是CSS选择器。
 <script type="text/javascript">
var app=new Vue(
    {
        el:document.getElementById('app'),
        
    }
);
</script>
  • 3、 挂载成功后，可以通过myapp.$el来访问该元素
  • 4、Vue实例的data选项，可以声明应用内书需要双向绑定的数据，建议所有要用到的数据都预先在data内声明。
    vue实例本身也代理了data对象的所有属性，可以通过app.属性名来访问
<script type="text/javascript">
var app=new Vue(
    {
        el:document.getElementById('app'),
        data:{
            myname:'zhangsan'
        }
        
    }
);

console.log(app.myname);
</script>

5、除显示声明数据外，也可以指向一个已有的变量，并且他们之间默认建立了双向绑定，当修改其中一个时，另一个也会一起变化

<script type="text/javascript">
var mydata={
    name:"lisi"
}
var app=new Vue(
    {
        el:document.getElementById('app'),
        data:mydata,
        
    }
);
console.log(app.name);//lisi
mydata.name="zhangsan";
console.log(app.name);//zhangsan
app.name='wanger';
console.log(mydata.name);//wanger
</script>
11、生命周期（钩子)

常见生命周期钩子

  • created：实例创建完成后调用。此阶段完成了数据的观测，但未挂载，$el还不可用。
  • mounted：el挂载到实例上之后调用，一般我们的第一个业务逻辑活在这里开始
  • beforeDestory：实例销毁之前调用，主要解绑一些使用addEventListener监听的事件等。

钩子也是作为选项写入vue实例内，并且狗仔的this指向的事调用它的vue实例：
以下代码在控制台内并未输出（vue2.6）

<script type="text/javascript">
var app=new Vue({
    el:"#app",
    data:{
        name:"zhangsan",
        created:function(){
            console.log(this.name);
        },
        mounted:function(){
            console.log(this.￥el);
        }
    }
});
12、插值与表达式

以下mounted时总是无法执行，这些钩子使用不了

<script type="text/javascript">
var app=new Vue({
    el:"#app",
    data:{
        name:"zhangsan",
        date:new Date(),
        
        mounted:function(){
            var _this=this;//声明一个变量指向Vue实例this，保持作用域一致
            this.timer=setInterval(function(){//创建一个timer定时器
                _this.date=new Date();
            },1000);
        },
        berforeDestory:function(){
            if(this.timer){
                clearInterval(this.timer);//销毁实例前，清除定时器
            }
        }
    }
});
</script>
12、v-html直接输出html

输出html，而不是将数据解释后的纯文本进行输出使用v-html，下例生成一个连接

<html>
    <head>
      <meta charset="utf-8">
      <script src="vue.js"></script>
      <title>ex02javascript</title>
        <style type="text/css">
        </style>
    </head>
    <body>  
<div id="app">
    <span v-html="mylink"></span>
</div>
<script type="text/javascript">
var app=new Vue({
    el:"#app",
    data:{
        mylink:"<a href='http://www.sina.com'>这是一个连接</a>",
    }
});
</script>
    </body>
</html>
13、v-pre直接跳过编译可以输出双大括号
<div id="app">
    <span v-pre>{{这里的内容不会被编译}}</span>
</div>
14、{{}}中进行简单的运算

只支持单个表达式，不支持语句和流程控制，不能使用自定义全局变量，只能使用vue白名单内的全局变量。

<body>  
<div id="app">
    <span>{{number/10}}--{{isok?'sure':'not sure'}}--{{text.split(',').reverse().join(',')}}</span>
</div>
<script type="text/javascript">
var app=new Vue({
    el:"#app",
    data:{
        number:100,
        isok:false,
        text:'123,456',
    }
});
</script>
</body>
15、过滤器
  • 通过在{{}}的尾部添加管道符 | 对数据进行过滤。经常用于格式化文本
  • 过滤规则是自定义的，通过给vue实例添加选项filter来设置。
 <div id="app">
    <!--这里date就是fromDate的参数-->
    {{date | formDate}}
</div>
<script type="text/javascript">
//月、日，小时前不足两位补0
var padDate=function(value){
    return value<10?'0'+value:value;
}
var app=new Vue({
    el:"#app",
    data:{
        date:new Date(),
        
    },
    //这里是单独的filter
    filters:{
        formDate:function (value){
            var date=new Date(value);
            var year=date.getFullYear();
            var month=padDate(date.getMonth()+1);
            var day=padDate(date.getDate());
            var hours=padDate(date.getHours());
            var minuters=padDate(date.getMinutes());
            var seconds=padDate(date.getSeconds());
            //将整理好的数据返回
            return year+'-'+month+'-'+day+'-'+hours+':'+minuters+':'+seconds;
        }
    }
});
</script>
</body>
</html>
  • 过滤器可以串联，也可以接收参数
    串联
 {{ message | filterA | filter B}}

接收参数

 {{ message | filterA ('arg1','arg2')}}
16、指令2

指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到dom上
数据驱动Dom是vue的核心理念，不到万不得已不要主动去操作dom。

<div id="app">
    <div v-if="isdisplay">是否显示</div>
</div>
<script type="text/javascript">

var app=new Vue({
    el:"#app",
    data:{
        isdisplay:true,
        
    },
    
});
</script>
</body>
17、v-bind指令动态更新属性

动态更新html元素上的属性，比如id，class等。
也就是说bind与属性及属性值有关，{{}}主要与标签内的数据有关，是数据，不是属性值。

<html>
    <head>
      <script src="vue.js"></script>
    </head>
<body>  
<div id="app">
    <!--这里bind使用冒号：-->
    <div><a v-bind:href='mylink'>这是一个连接</a></div>
    <div><img v-bind:src='imgurl'/></div>
</div>
<script type="text/javascript">

var app=new Vue({
    el:"#app",
    data:{
        isdisplay:true,
        mylink:'http://www.sina.com.cn',     imgurl:'http://n.sinaimg.cn/ent/4_img/upload/a57892fc/300/w440h660/20210103/220e-kherpxx1959782.jpg',
    },
});
</script>
</body>
</html>
18、v-on指令动态更新事件

v-on绑定事件监听器
可以绑定的事件还有click，dbclick，keyup，mouseover
这些函数都写在vue对象的methods属性内。
案例：点击按钮隐藏内容

<body>  
<div id="app">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>
<script type="text/javascript">

var app=new Vue({
    el:"#app",
    data:{
        show:true,
        
    },
    //方法，过滤器等单独做一个对象来存储
    methods:{
        handleClose:function(){
            this.show=false;//这个show是自定义的对象
        }
    }
    
});
</script>
</body>

也可以在内联语句中使用

<body>  
<div id="app">
    <p v-if="show">这是一段文本</p>
    <input type="submit" v-on:click="show=false" value="提交">点击隐藏</input>
</div>
<script type="text/javascript">

var app=new Vue({
    el:"#app",
    data:{
        show:true,
        
    },
    //方法，过滤器等单独做一个对象来存储
    methods:{
        handleClose:function(){
            this.show=false;//这个show是自定义的对象
        }
    }
    
});
</script>
</body>
19、语法糖（简化写法）

语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。其实就是简化写法，如v-bind：简写为只写冒号：
v-bind：简写为：
v-on：简写为@
类似小程序开发也有类似的写法

心湖中的石子
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值