精华内容
下载资源
问答
  • 关于Vue中props详解

    万次阅读 多人点赞 2018-07-23 00:11:08
    看一下官方文档: 组件实例的作用域是孤立的。...一个组件可以直接在模板里面渲染data里面的数据(双大括号)。 子组件不能直接在模板里面渲染父元素的数据。 如果子组件想要引用父元素的数据,那么就在...

    看一下官方文档:

    组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

    也就是props是子组件访问父组件数据的唯一接口。

    详细一点解释就是:

    一个组件可以直接在模板里面渲染data里面的数据(双大括号)。

    子组件不能直接在模板里面渲染父元素的数据。

    如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据。然后在模板里渲染这个变量(前面的a),这时候渲染出来的就是父元素里面的数据。
     

    1. 基本用法

    图1-props

        <div id="app1">
            <!-- hello引用父元素的hello,它也可以引用message,greet,world等 -->
            <child :hello='hello'></child>
        </div>
        <script>
            var com1 = Vue.component('child',{
                // 声明在prop中的变量可以引用父元素的数据
                props:['hello'],
               // 这里渲染props中声明的那个hello
                template:'<div><p>{{ hello }}</p></div>',
            })
    
            var app1 = new Vue ({
                el: '#app1',
                data: {
                    greet: {
                        hello:'hello,',
                        world: 'world',
                    },
                    message: 'message1',
                }
            })
        </script>
    

     

    2. camelCase vs. kebab-case:js中用驼峰式命名,在html中替换成短横线分隔式命名

    <!-- 在 HTML 中使用 kebab-case -->
    <child my-message="hello!"></child>
    
    <script>
        Vue.component('child', {
            // 在 JavaScript 中使用 camelCase
            props: ['myMessage'],
            template: '<span>{{ myMessage }}</span>'
        })
    </script>
    

     

    3.单向数据流: props是单向绑定的

    当父组件的属性变化时,将传导给子组件,但是反过来不会。

    每次父组件更新时,子组件的所有 prop 都会更新为最新值。

    不要在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。

    在两种情况下,我们很容易忍不住想去修改 prop 中数据:

    1. Prop 作为初始值传入后,子组件想把它当作局部数据来用;
    2. Prop 作为原始数据传入,由子组件处理成其它数据输出。

    对这两种情况,正确的应对方式是:
    定义一个局部变量,并用 prop 的值初始化它:

        props: ['initialCounter'],
        data: function () {
          return { counter: this.initialCounter }
        }
        
    

    定义一个计算属性,处理 prop 的值并返回:

        props: ['size'],
        computed: {
          normalizedSize: function () {
            return this.size.trim().toLowerCase()
          }
        }
    

     
    注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

    举个例子:

        <div id="app3">
            <my-component :object='object'></my-component>
        </div>
        <script src="http://vuejs.org/js/vue.min.js"></script>
        <script>
            //
            var mycom = Vue.component('my-component', {
                //添加一个input改变子组件的childOject,那么父元素的object也会被改变,但是Vue没有报错!
                template: '<p>{{ object.name }} is {{ object.age }} years old.<br><input v-model="childObject.name" type="text"></p>',
                props: ['object','school'],
                data: function () {
                    // 子组件的childObject 和 父组件的object 指向同一个对象
                    return {
                        childObject: this.object
                    }
                }
            });
            var app3 = new Vue({
                el: '#app3',
                data: {
                    object:{
                        name: 'Xueying',
                        age: '21',
                    },
                    school:'SCUT',
                },
            })
        </script>
    

    图2-改变childObject.name,object.name也改变

     

    图3-控制台输出app3.object.name

     

     

    4. props验证

    可以为prop指定验证规则,如果传入的数据不符合要求,Vue会发出警告。

    具体验证规则见官方文档:Prop验证规则
     

    5. $parent

    $parent 也可以用来访问父组件的数据。

    而且子组件可以通过$parent 来直接修改父组件的数据,不会报错!

    可以使用props的时候,尽量使用props显式地传递数据(可以很清楚很快速地看出子组件引用了父组件的哪些数据)。

    另外在一方面,直接在子组件中修改父组件的数据是很糟糕的做法,props单向数据流就没有这种顾虑了。

    展开全文
  • vue delimiters作用

    2019-11-08 11:52:22
    VUE delimiters的作用是改变我们插值的符号,Vue默认的插值是双大括号{{}},在一些特殊的情况下我们可能会用到其他的方式绑定插值,比如在使用Twig 文件开发时,twig本身也是{{}}绑定数据,这样就与vue 冲突了. ...

    VUE 中delimiters的作用是改变我们插值的符号,Vue默认的插值是双大括号{{}},在一些特殊的情况下我们可能会用到其他的方式绑定插值,比如在使用Twig 文件开发时,twig本身也是{{}}绑定数据,这样就与vue 冲突了.


    现在我们的插值形式就变成了${},代替了{{ }},

    在页面中就可以使用 ${xxxxx}  绑定对应的值

    展开全文
  • Vue中filter使用

    2020-05-28 10:22:29
    Vue中filter过滤器是一个非常强大的功能。 个人觉得称它为加工车间会更加贴切一些。 过滤器可以用来筛选出符合条件的,丢弃不符合条件的; 加工车间既可以筛选,又可以对筛选出来的进行加工。 一、filter的作用是...

    在Vue中filter过滤器是一个非常强大的功能。
    个人觉得称它为加工车间会更加贴切一些。
    过滤器可以用来筛选出符合条件的,丢弃不符合条件的;
    加工车间既可以筛选,又可以对筛选出来的进行加工。
    一、filter的作用是:对值进行筛选加工。
    二、使用的地方有两个位置,和两个方式。

    1 {{ msg | filterA }}双括号插值内。

    2 <h1 v-bind:id=" msg | filterA">{{ msg }}</h1>v-bind绑定的值的地方。
    (msg为需要filter处理的值,filterA为过滤器。)
    方式

    3 {{ msg | filterA }}单个使用。

    4 {{ msg | filterA| filterB }}多个连用。

    Vue.js 过滤器的基本使用(filter)
    vue中的过滤器分为两种:局部过滤器和全局过滤器

    1、定义无参全局过滤器

    <div id="app">
       <p>{{ msg | msgFormat}}</p>
    </div>
    
    <script>
        // 定义一个 Vue 全局的过滤器,名字叫做  msgFormat
        Vue.filter('msgFormat', function(msg) {
            // 字符串的  replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则
            return msg.replace(/单纯/g, 'xx')
        })
    </script>
    

    2、定义有参全局过滤器

    <div id="app">
      <p>{{ msg | msgFormat('疯狂','--')}}</p>
    </div>
    
    <script>
        // 定义一个 Vue 全局的过滤器,名字叫做  msgFormat
        Vue.filter('msgFormat', function(msg, arg, arg2) {
            // 字符串的  replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则
            return msg.replace(/单纯/g, arg+arg2)
        })
    </script>
    

    3、局部过滤器

    局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中。其作用的区域也是vue实例【#app】控制的区域

    // 创建 Vue 实例,得到 ViewModel
     var vm = new Vue({
          el: '#app',
          data: {
              msg: '曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
          },
          methods: {},
          //定义私用局部过滤器。只能在当前 vue 对象中使用
          filters: {
              dataFormat(msg) {
                  return msg+'xxxxx';
              }
          }
      });
    

    注意:

    1、 当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!

    2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

    ————————————————
    一半转自:版权声明:本文为CSDN博主「有一个王小森」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/wangxiaoxiaosen/article/details/94000954

    一半转自:https://www.cnblogs.com/wujiaofen/p/11236176.html

    展开全文
  • 详细一点解释就是:一个组件可以直接在模板里面渲染data里面数据(双大括号)。子组件不能直接在模板里面渲染父元素数据。如果子组件想要引用父元素数据,那么就在prop里面声明一个变量(比...

    看一下官方文档:

    组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中.

    也就是props是子组件访问父组件数据的唯一接口。

    详细一点解释就是:

    一个组件可以直接在模板里面渲染data里面的数据(双大括号)。

    子组件不能直接在模板里面渲染父元素的数据。

    如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据。然后在模板里渲染这个变量(前面的a),这时候渲染出来的就是父元素里面的数据。

    基本用法

    //向子组件传值

    import helloWorld2 from "./HelloWorld2" //引用子组件页面

    export default {

    name: "HelloWorld3",

    data() {

    return {

    good: "我是从hello word3传递过来的"

    }

    },

    components: {

    'hello-world2': helloWorld2 //注册子组件

    },

    }

    {{good}}

    export default {

    props: ['good'], //通过props获取父组件传递过来的值

    data: function () {

    return {}

    },

    methods: {}

    }

    总结:父组件通过v-bind向子组件传值,子组件通过props来获取父组件传递过来的值,被引用的就是子组件

    camelCase vs. kebab-case:js中用驼峰式命名,在html中替换成短横线分隔式命名

    Vue.component('child', {

    // 在 JavaScript 中使用 camelCase

    props: ['myMessage'],

    template: '{{ myMessage }}'

    })

    单向数据流: props是单向绑定的

    父组件的属性变化时,将传导给子组件,但是反过来不会。

    每次父组件更新时,子组件的所有 prop 都会更新为最新值。

    不要在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。

    在两种情况下,我们很容易忍不住想去修改 prop 中数据:

    Prop 作为初始值传入后,子组件想把它当作局部数据来用;

    Prop 作为原始数据传入,由子组件处理成其它数据输出。

    对这两种情况,正确的应对方式是:

    定义一个局部变量,并用 prop 的值初始化它:

    props: ['initialCounter'],

    data: function () {

    return { counter: this.initialCounter }

    }

    定义一个计算属性,处理 prop 的值并返回:

    props: ['size'],

    computed: {

    normalizedSize: function () {

    return this.size.trim().toLowerCase()

    }

    }

    注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

    举个例子:

    //

    var mycom = Vue.component('my-component', {

    //添加一个input改变子组件的childOject,那么父元素的object也会被改变,但是Vue没有报错!

    template: '

    {{ object.name }} is {{ object.age }} years old.

    ',

    props: ['object','school'],

    data: function () {

    // 子组件的childObject 和 父组件的object 指向同一个对象

    return {

    childObject: this.object

    }

    }

    });

    var app3 = new Vue({

    el: '#app3',

    data: {

    object:{

    name: 'Xueying',

    age: '21',

    },

    school:'SCUT',

    },

    })

    图2-改变childObject.name,object.name也改变

    图3-控制台输出app3.object.name

    props验证

    可以为prop指定验证规则,如果传入的数据不符合要求,Vue会发出警告。

    具体验证规则见官方文档:Prop验证规则

    $parent

    $parent 也可以用来访问父组件的数据。

    而且子组件可以通过$parent 来直接修改父组件的数据,不会报错!

    可以使用props的时候,尽量使用props显式地传递数据(可以很清楚很快速地看出子组件引用了父组件的哪些数据)。

    另外在一方面,直接在子组件中修改父组件的数据是很糟糕的做法,props单向数据流就没有这种顾虑了。

    展开全文
  • Angular和VUE都支持在HTML界面直接输入Javascript的表达式,而...一个是HTML的attribute的表达式,另一个是双大括号的HTML展示字符的表达式。 //Angular <button diabled="$ctrl.isDisable"> {{$ctrl.butt..
  • Vue中props详解

    2019-07-02 09:45:16
    看一下官方文档: 组件实例的作用域是孤立的。...一个组件可以直接在模板里面渲染data里面的数据(双大括号)。 子组件不能直接在模板里面渲染父元素的数据。 如果子组件想要引用父元素的数据,那么就在prop里面声明...
  • Vue中props的详解看一下官方文档:组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。也就是props是子组件访问父组件数据...
  • Vue中的filter过滤器是使用方法

    万次阅读 2019-06-28 15:02:32
    Vue中filter过滤器是一个非常强大的功能。 个人觉得称它为加工车间会更加贴切一些。 过滤器可以用来筛选出符合条件的,丢弃不符合条件的; 加工车间既可以筛选,又可以对筛选出来的进行加工。 一、filter的作用是...
  • Vue中的三种模板

    千次阅读 2018-07-12 13:51:49
    因为现在学还比较基础,总结也都是...使用{{}}语法,作用:替换实例上属性值,当值改变时,插值内容处会自动更新原生html:双大括号输出是文本,不会解析html(想要解析html,可以使用指令v-html)属性...
  • 详细一点解释就是:一个组件可以直接在模板里面渲染data里面数据(双大括号)。子组件不能直接在模板里面渲染父元素数据。如果子组件想要引用父元素数据,那么就在prop里面声明一个变量(比...
  • vue模板语法篇插值在vue项目,要动态的...双大括号的常用场景:javascript 表达式什么是javascript表达式?是由运算元和运算符(可选)构成,并产生运算结果的语法结构。表达式分为单值表达式、复合表达式。单值表达...
  • vue中{{}}与框架冲突

    2020-05-25 09:21:17
    VUE 中delimiters的作用是改变我们插值的符号,Vue默认的插值是双大括号{{}},在一些特殊的情况下我们可能会用到其他的方式绑定插值, 例如:再用vue写项目,在后台上次打包上线的时候。vue中的插值符号{{}} 起不了作用...
  • vue

    2018-12-06 21:40:20
    vue.js指令 1.插值表达式{{}},双大括号表达式,不能直接写在html标签上 v-bind,html标签上插值指令 &lt;div id="app"&gt; //vue接管区域不能是... //报错,双大括号插值指令不能直接作用在htm...
  • ​ v-text 和v-html作用相近,都是更新元素的的内容,可以理解为innertext和innerHTML,而不能一味的滥用这两个指令 ,如果需要更新的只是部分的元素则应该使用的是双大括号的插值:{{value}}。 v-html 会解析标签...
  • vue的常用指令

    2020-11-09 23:32:40
    ​ v-text 和v-html作用相近,都是更新元素的的内容,可以理解为innertext和innerHTML,而不能一味的滥用这两个指令 ,如果需要更新的只是部分的元素则应该使用的是双大括号的插值:{{value}}。 v-html 会解析标签...
  • Vue的插值表达式

    千次阅读 2018-10-25 21:26:20
      主要作用是进行数据绑定,最常见形式是使用“Mustache”语法(双大括号文本插值。例如:&amp;lt;span&amp;gt;Message:{{msg}}&amp;lt;/span&amp;gt;Mustache标签将会被替代为对应数据对象...
  • vue中父组件的数据如何传送到子组件中?组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。...详细一点解释就是:一个组件可以直接在模板里面渲染data里面的数据(双大括号)。子组件不...
  • VUE学习日记1

    2020-03-30 15:28:56
    el为挂载点、data为挂载点中数据,上图为将数据传入ID=app标签中{{message}},双大括号语法为插值表达式。 vue实例作用范围为挂载标签与所有子标签。 data数据 VUE中数据定义在data中,data中数据可以...
  • vue中父组件的数据如何传送到子组件中?组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。...详细一点解释就是:一个组件可以直接在模板里面渲染data里面的数据(双大括号)。子组件不...
  • vue语法.rar

    2019-08-16 11:03:43
    在一个系统或App中,由多个页面组成,通常会使用vue中的组件来实现,那么从一个页面跳转到另一个页面时, 通过url路径来实现,哪个url对应哪个页面,在vue中是通过vue-router来实现 Vue-router在vue2.0中使用...
  • 1. v-text 指令 v-text 指令用于更新标签包含的文本,它的作用双大括号的效果一样。我们看看它的用法: &lt;div id="app"&gt; &lt;p v-text="msg"&gt;&lt;/p&...
  • vue Day2

    2017-04-16 11:05:33
    2.指令与模版2.1 什么是指令 是一种特殊自定义行间向量 指令职责就是当其表达式值改变...文本:使用“Mustache”语法(双大括号){{value}} 作用:替换实例上属性值,当值改变时,插值内容处会自动更新原生
  • Vue基础——常用指令

    2020-11-05 11:46:31
    ​ v-text 和v-html作用相近,都是更新元素的的内容,可以理解为innertext和innerHTML,而不能一味的滥用这两个指令 ,如果需要更新的只是部分的元素则应该使用的是双大括号的插值:{{value}}。 另外 v-
  • vue模板语法篇插值在vue项目,要动态的...双大括号的常用场景:javascript 表达式什么是javascript表达式?是由运算元和运算符(可选)构成,并产生运算结果的语法结构。表达式分为单值表达式、复合表达式。单值表达...
  • 2、Vue插值表达式

    2021-04-01 10:12:06
    主要作用是进行数据绑定,最常见形式是使用“Mustache”语法(双大括号文本插值。例如:Message:{{msg}}Mustache标签将会被替代为对应数据对象上msg属性(msg定义在data对象值。无论何时,绑定数据...
  • 第一节Vue官网学习(模板语法:一、{{}}双大括号语法)我们说到了双大括号语法,他会随着Vue示例data属性下面属性名称值改变而改变,有时候我们也需要一些属性随着业务或者操作而改变。 比如disabled属性,...
  • 1. {{xxxx}}双大括号文本绑定 2. v-xxxx以v-开头用于标签属性绑定,称为指令 双大括号语法{{}} 格式:{{表达式}} 作用: 使用在标签体,用于获取数据 可以使用 JavaScript 表达式 一次性插值v-once 通过...

空空如也

空空如也

1 2 3
收藏数 43
精华内容 17
关键字:

vue中双大括号的作用

vue 订阅