Vue学习笔记_new mycomponent().$mount();第二次渲染页面没有变化-CSDN博客

本文链接：https://blog.csdn.net/sinat_31250617/article/details/52724329

Vue2.0和1.0的一些语法差别

（一）数据绑定语法

只处理单次插值，今后的数据变化就不会再引起插值更新
1.0的写法：<span>This will never change: {{* msg }}</span>
2.0的写法：<span v-once>This will never change: {{ msg }}</span>

输出真的 HTML 字符串

1.0的写法：<div>{{{ raw_html }}}</div>
2.0的写法：<div v-html="rawHtml"></div>

零散笔记

视图中简单的数据处理可以用绑定表达式完成，这是由一个简单的JavaScript表达式和可选的一个或多个过滤器构成。当需要完成复杂的操作时，就需要用到计算属性computed。

~~angular中有模板指令directive，在vue中用partial完成这个功能。~~（这里好像有错。应该是component和extend？partial和component、extend作用的区别是什么？）

<body>
    <div id="app">
        <partial name="myPar"></partial>
    </div>
</body>
<script type="text/javascript">
var Par = Vue.partial("myPar","<h1>{{aa}}</h1>");
    new Vue({
        el:"#app",
        data:{
            aa:"fdsfsd"
        }
    })
</script>

Class 与 Style 绑定

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。

v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

v-for遍历对象时，如果对象中存在key值相同的成员，则只渲染出一个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<body>
    <div id="app1">
        <ul>
            <li v-for="key in items">
                {{$key}}------{{key}}
            </li>
            <!-- <template v-for="(num,item) in items">
                <li >
                    {{num}}:template模板
                </li>
                <li >
                    {{item.key}}
                </li>
            </template> -->
        </ul>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app1",
        data:{
            items: {
                key1: 'John',
                key1: 'Doe',
                key3: 30
            }
        }
    })
</script>
</html>

使用Vue.extend扩展时，绑定数据data时，必须以图中一个函数里面return一个数据这种形式完成。

Vue.extend扩展的组件必须挂在一个DOM元素下，挂载的方式有以下几种全局注册以及图中箭头所示的局部注册：

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 手动挂载
new MyComponent().$mount().$appendTo('#container')

这里写图片描述

new Component1().$mount(‘#example1’)注册组件方式和另外一种注册组件方式的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Component1</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<body>
    <span>example1</span>
    <div id="example1">
        <my-component1></my-component1>
    </div>

    <span>example2</span>
    <div id="example2">
        <my-component1></my-component1>
    </div>

    <span>example3</span>
    <div id="example3">
        <my-component1></my-component1>
    </div>
</body>
<script type="text/javascript">
    var Component1 = Vue.extend({
        template:"<h1 style='color:red'>Component1</h1>"
    });

    // 这种方式注册组件，组件可以在任何一个vue实例中使用
    Vue.component("my-component1",Component1);

    new Vue({
        el: '#example1'
    })

    new Vue({
        el: '#example2'
    })

    new Vue({
        el: '#example3'
    })

    // 这种方式注册组件，组件绑定在example1这个实例，只能在example1这个实例中实用
    // new Component1().$mount('#example2')


</script>
</html>

components中key值的书写不可以用驼峰命名法，需要用小写或者横杠链接，例如ChildNode要写成childnode.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<body>
    <div id="app">
        <ParentNode></ParentNode>
    </div>
</body>
<script type="text/javascript">
    var Child = Vue.extend({
        template:"<h1>ChildNode{{ChildData}}</h1>",
        data:function(){
            return {
                ChildData:"This is a childNode"
            }
        }
    });

    var Parent = Vue.extend({
        template:"<h1>ParentNode{{ParentData}}-----ChildNode<ChildNode></ChildNode></h1>",
        components:{
            "ChildNode":Child,
        },
        data:function(){
            return {
                ParentData:"This is a ParentNode"
            }
        }
    });
    var vm = new Vue({
        el:'#app',
        components:{
            'ParentNode': Parent
        }
    })
</script>
</html>

使用props进行组件之间的数据通讯。用props声明的变量名字不能和组件内部定义的变量名字相同。

问题点

用methods或者computed怎么使某个样式隔一段时间就改变一次?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<style type="text/css">

    .a{
        font-size: 30px
    }
    .b{
        color: red
    }
    .c{
        text-decoration: underline;
    }
</style>
<body>
    <!-- class对象语法 -->
    <div id="app1">
        <div v-bind:class="{a:isa,b:isb,c:isc}">用methods或者computed怎么使某个样式隔一段时间就改变一次</div>
    </div>
</body>

<script type="text/javascript">

    var vm = new Vue({
        el:"#app1",
        data:{
                isa:true,
                isb:true,
                isc:true

        },
        // methods:{
        //  setInterval(function(){vm.isb=!vm.isb},1000)
        // }
        // computed: {
        //     isb: function () {
        //       // `this` 指向 vm 实例
        //       this.isb =true
        //  }
        // }
})

</script>
</html>

为什么内联表达式访问原生 DOM 事件需要传入$event这个参数，<div id="example"><button v-on:click="greet">Greet</button></div>这样绑定就不用传？原生事件中好像是直接在函数中写function(e){console.log(e.target.tagName);}就可以了吧？
绑定事件是on:click后面的函数加括号和不加括号的区别是什么？

~~methods和计算属性computed有什么区别？~~
(个人理解：methods仅仅绑定一个函数，键值对中key是函数名，值就是对应的函数；computed是用于操作model,里面键值对中的key是一个数据（这个数据与data中的数据相同），computed将数据、视图、函数三者一起绑定，computed中执行后，key值有变化并反映到视图中。)

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 一个计算属性的 getter
    b: function () {
      // `this` 指向 vm 实例
      return this.a + 1
    }
  }
})

~~为什么在控制台中用this.firstName获取不了data里面的数据，用vm.firstName就可以获取得到？~~
(this是methods里面函数获取data里面变量用的，在浏览器控制台中用不了。)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div id="app">
        {{fullName}}
        <input type="text" v-model="lastName">
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            firstName:"aaa",
            lastName:"bbb",
            fullName:"aaa bbb",
        },

        // computed:{
        //  b:function(){return this.a + 1}
        // }
    })
    vm.$watch('lastName',function(val){
        this.fullName = this.firstName + val;
    })
</script>
</html>

这里写图片描述

~~data里面inputText这个变量怎么作为函数的参数输出？~~
（已经解决，看后面相应的截图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<body>
    <div id="app1">

        <!-- 普通绑定事件 -->
        <button v-on:click="say1">点击:绑定普通事件</button><br>

        <!-- 绑定带参数事件 -->    
        <input type="text" v-model="inputText">{{inputText}}<br>
        <button v-on:click="say2(vm1.inputText)">点击:绑定带参数事件</button><br>

    </div>
</body>
<script type="text/javascript">
    var vm1 = new Vue({
        el:"#app1",
        data:{
            inputText:"inputText",
        },
        methods:{
            say1:function(){
                console.log("点击:绑定普通事件");
            },
            say2:function(msg){
                console.log(msg);
            }
        }
    })
</script>
</html>

改成下图所示的样子即可
这里写图片描述

props单向绑定父子组件后，父组件刚开始的数据变化会影响子组件，但是子组件如果自行修改过一次之后，父组件再变化，子组件没有受到影响，这是为什么？父子组件双向绑定，子组件对父组件也起不了作用？
（子组件模板那里写得不对，应该改成'<span><input v-model="childmsg"></span>'，将input标签资深双向绑定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<body>
    <div id="app">
        input:<input type="text" v-model="parentdata">
        <h4>parentdata:{{parentdata}}</h4>
        子组件自身的data:<child childmsg="childmsg"></child><br>
        子组件自身的data（字面量和动态语法）:<child :childmsg="123"></child><br>
        <!-- 从父组件传来的data:<child v-bind:childmsg="parentdata"></child><br> -->
        父子组件双向绑定:<child :childmsg.sync="parentdata"></child><br>
        父子组件单次双向绑定:<child :childmsg.once="parentdata"></child><br>
    </div>
</body>
    <script type="text/javascript">
        Vue.component(
            'child',
            {
                props:['childmsg'],
                template:'<input type="text"  value="{{childmsg}}" />'
            }
        );
        new Vue({
            el:"#app",
            data:{
                parentdata:"parent"
            }
        })
    </script>
</html>

~~~events的作用是什么？~~
（负责父子组件之间事件的通讯）

 var Parent = new Vue({
        el: '#component1',
        data: {
            messages: []
        },
        // 在创建实例时 `events` 选项简单地调用 `$on`
        events: {
            'c1_events': function(msg) {
                // 事件回调内的 `this` 自动绑定到注册它的实例上
                this.messages.push(msg)
                console.log('c1_events:' + msg);
            },
            'all_events': function(msg) {
                console.log('all_events Praent:' + msg);
            },
            'all_events1': function(msg) {
                console.log('all_events1 Praent:' + msg);
            }
        },
        methods: {
            'c1_do1': function() {
                this.$emit('c1_events', 'Parent events do')
                this.$children[0].msg = '组件c2[0]设值';
            },
            'c1_do2': function() {
                this.$children[1].msg = '组件c2[1]设值';
            },
            'c1_do3': function() {
                this.$children[2].msg = '组件c2[2]设值';
            }
        }
    });