零基础学习 Vue.JS ——（2）

最新推荐文章于 2024-07-24 12:54:56 发布

不认输的西瓜

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量406

点赞数 2

分类专栏： vue 文章标签：前端 vue js 框架基础

本文链接：https://blog.csdn.net/qq_40678503/article/details/82052247

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Vue.js观察属性
Vue提供了watch属性这种更通用的方式来观察和响应数据的变动
watch属性的回调函数没有返回值，回调函数可以执行一些复杂的任务，比如绘制图形等。因为watch属性没有返回值，所以不适合在表达式中使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <canvas id="test" width="300" height="300"></canvas>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
    data:{
        r:0
    },
    watch:{
        r:function(newValue,oldValue){
            var c=document.getElementById("test");
            var ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.clearRect(0,0,300,300);
            ctx.lineWidth=5;
            ctx.strokeStyle="red";
            ctx.arc(100,100,newValue,0,360*Math.PI/180);
            ctx.stroke();
        }

    }
});

在控制台输入app.r=10就会出现半径为10的圆形,如图：
这里写图片描述

Vue文本插值

数据绑定最常见的形式就是使用大括号的文本插值比如：{{username}},如果模型层中数据对象也就是data中的username属性发生了改变，插值处的内容就会更新。
插值是单向绑定的，数据对象发生变化会体现在插值上，但是插值变化不会体现在数据对象上，也就是在视图层的html中修改username的值模型层中的不会随之改变。
而使用双大括号插值，如果vue没有完成对页面的渲染，那么用户是会短暂的看到插值表达式的，解决这个问题可以使用v-text指令来替代

<div id="app">
<p v-text="username"></p>
</div>

通过使用 v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。

<div id="app">
<p><input type="text" v-model="username"></p> 
<p><span v-once>Hello,{{username}}</span></p>
</div>

HTML插值

双大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML , 你需要使用 v-html指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-html="content"></div>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
    data:{
        content:"<a href='http://www.baidu.com'>百度</a>"
    }
});

只对可信内容使用 HTML 插值,绝不要对用户提供的内容插值。

data: {
article: "<a href='javascript:alert(1)'>抽奖</a>" }

会执行alert(1)，可能执行这句话没什么大问题，但是当你插入的是一大段javascript代码就会对整个程序产生很大的影响，程序安全性也会下降。

属性插值
如果要对HTML元素属性插值,应该使用 v-bind 指令。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red-btn{
            color:red;
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        <input type="button" value="报名" v-bind:disabled="age<18" v-bind:class="btn">
    </p>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
    data:{
        username:"haha",
        age:14,
        btn:"red-btn"
    }
});

插值中的表达式
在模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定, Vue.js 都提供了完全的 JavaScript 表达式支持。

<p>{{username.slice(0,3)}}</p> 
<p>{{Math.round(salary/22)}}</p> 
<p>{{sex=="male"&&age>=18}}</p>
<p v-bind:class="sex=='female'?'pink':'blue'">Hello</p> 
<p>{{ var a = 1 }}</p>