Vue数据绑定

gitHub地址:https://github.com/manlili/vue_learn里面lesson04

 

一 双括号用来数据绑定

(1)写法一: {{message}},这种可以实时响应

(2)写法二: {{*message}},单次插值,今后的数据变化就不会再引起插值更新了(vue2.0之后使用v-once  

{{message}}

一次性改变,数据改变时不更新)

(3)双括号标签也可以用在属性上(vue2.0之后不可以这样写,要写成:

)

举个栗子:

复制代码
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue插值title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            .lili-xiaoman {
                color: red;
            }
        style>
    head>
    <body>
        <div class="test">
            <p>{{message}}p> 
            <p>{{*message}}p> 
            <p class="lili-{{message}}">双括号标签也可以用在属性上p>
        div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message:"xiaoman"
                }
            })
        script>
    body>
html>
复制代码

当我在控制台改变message时,{{*message}}不会跟着改变值

Vue数据绑定_第1张图片

 

 

二 双括号里面可以为javascript单元表达式

比如(只支持单元表达式)

1
2
3
{{ number + 1 }}
 
{{ ok ? 'YES' : 'NO' }}

但是不支持

复制代码


{{ var a = 1 }}



{{ if (ok) { return message } }}
复制代码

 

完整测试代码如下:

复制代码
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue双括号里面的内容title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    head>
    <body>
        <div class="test">
            <p>{{message+1}}p> 
        div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message:12
                }
            });
            
        script>
    body>
html>
复制代码

上面的输出是13

 

 三 双括号可以放过滤器

复制代码
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue数据绑定title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    head>
    <body>
        <div class="test">
            <p>{{message | sum}}p>
        div>
        <script type="text/javascript">
            Vue.filter("sum", function(value) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
                return value + 4;
            });

            var myVue = new Vue({
                el: ".test",
                data: {
                    message: 12
                }
            });
            
        script>
    body>
html>
复制代码

上面代码的输出值是16

 

四 用指令绑定数据( 指令 是特殊的带有前缀 v- 的特性)

举个v-if的例子:

复制代码
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue数据绑定title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    head>
    <body>
        <div class="test">
            <p v-if="isShow">isShow控制着我是否显示1p>
            <p v-if="!isShow">isShow控制着我是否显示2p>
        div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    isShow: true,
                }
            });
        script>
    body>
html>
复制代码

上面只显示第一个div

 

五 v-bind绑定数据

需要注意事项:

(1) 直接在属性里面写{{}}也是正确的,因为Vue内部渲染的时候会把属性里面的双括号转为v-bind,这样会比直接用v-bind效率效率稍微慢一点

(2) v-bind可简写为 :

复制代码
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue数据绑定title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    head>
    <body>
        <div class="test">
            <a href={{url}}>点击我跳到百度首页a> 
            <a v-bind:href="url">点击我跳到百度首页a>  
            
            <div style="color: {{colorA}}">我是红色div> 
            <div v-bind:style="{color: colorB}">我是绿色div> 
        div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    url: "https://www.baidu.com/",
                    colorA: 'red',
                    colorB: 'green' 
                }
            });
        script>
    body>
html>
复制代码

 

六 v-on绑定数据

(1) v-on是在vue的methods里面实现的

(2) v-on可以简写为 @

复制代码
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue数据绑定title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    head>
    <body>
        <div class="test">
            <button v-on:click="goAction()"> 
                点击我跳到百度
            button>
        div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                methods: {
                    goAction: function () {
                        location.href = "https://www.baidu.com/";
                    }
                }
            });
        script>
    body>
html>
复制代码

 原文链接:http://www.cnblogs.com/lily1010/p/5834187.html

你可能感兴趣的:(◆VueJs与NodeJs学习,Vue数据绑定)