前端学习：Vue.js基本使用

Vue教程文档： https://cn.vuejs.org/v2/guide/

定义

实例： new Vue() 挂载点: el 数据：data 模板: template 方法：methods 计算属性: computed类似 variable = variable() 侦听器: watch 一旦数据变化都会触发 参数：props 组件：components 组件与实例的关系：每一个组件都是一个Vue实例 父组件与子组件交互：

• 父组件通过 属性 传递给子组件参数
• 子组件通过 发布事件$emit 传递给父组件参数，前提是父组件需要先 注册事件

使用

变量使用：使用插值表达式 {{ variable }} 文本替换：v-text="variable" 内容替换：v-html="content" 事件绑定：v-on:click="function" 等价于@click="function" 属性绑定: v-bind:title="variable" 等价于 :title="variable" 双向数据绑定: v-model="variable" show语句：v-show="bool" 为真时显示 if语句：v-if="bool" 为真时加入dom for语句：

{{item}}

实例

第一个Vue实例 插值表达式

    {{ hello }}  

    
        //Vue实例
        new Vue({
            el: "#hello",
            data: {
                hello: "hello world"
            }
        })
    

hello world

挂载点， 实例， 模板

    
    
    

    
        // 实例
        new Vue({
            el: "#root",
            // 模板, 如果实例中没有定义模板，则默认使用挂载点里边的dom元素为模板
            template: "hello template {{ msg }}",
            data: {
                msg: "this is message",
            }
        })
    


hello template this is message

文本替换

    

    
        new Vue({
            el: "#text",
            data: {
                number: 123456,

            }
        })
    

123456

内容替换 事件绑定

方法 v-on:等价于@

    

    
        new Vue({
            el: "#html",
            data:{
                content: "this is content"
            },
            methods: {
                handleClick: function(){
                    this.content = " click"
                },
                handleDoubleClick: function(){
                    this.content = "double click"
                }
            }
        })
    


this is content

属性绑定 使用v-bind之后，相单于一个js表达式 等价于:title

    this is title

    
        new Vue({
            el:"#bind",
            data: {
                title: "this is a title"
            }
        })
    


this is title

双向数据绑定

    
        
        {{ content }}
    

    
        new Vue({
            el:"#db-bind",
            data: {
                content: "this is data double bind"
            }
        })
    



this is data doubldasdase bind
this is data doubldasdase bind

计算属性

    
        
        
        {{ fullName }}
        {{ count }}
    

    
        new Vue({
            el:"#computed",
            data: {
                firstName: "",
                lastName: "",
                count: 0
            },
            // 计算属性
            computed: {
                fullName: function(){
                    return this.firstName + " " + this.lastName
                }
            },
            // 侦听器, 一旦数据变化都会触发
            watch: {
                fullName: function(){
                    this.count ++
                }
            }

        })
    

v-if v-show v-for

    
        v-if从dom中移除（适合一次操作）
        v-show从dom中隐藏（适合多次操作）
    toggle
    
        {{item}}

        
        {{item}}
    


    
        new Vue({
            el: "#vif",
            data: {
                show: true,
                list: ["first", "second", "third", "fourth"]
            },
            methods: {
                handleClick: function(){
                    this.show = !this.show
                }
            }
        })
    

v-if从dom中移除（适合一次操作）
v-show从dom中隐藏（适合多次操作）
toggle
first
second
third
fourth
first
second
third
fourth

TodoList实例

    
        
        确定
        
        
           
            {{ item }}
            
        

        
        
           

            
        
    
    

        // 全局组件
        Vue.component("global", {
            template: "
item-global
"
        })

        // 组件与实例的关系：每一个组件都是一个Vue实例,
        Vue.component("todo-item", {
            props: ["content", "index"], //接收参数，通过属性传递值
            template: '
{{content}} {{index}}
',  //显示
            methods: {
                handleClick: function(){
                    this.$emit("delete", this.index)  //子组件通过发布和父组件通讯
                }
            }
        })

        // 父组件与子组件通讯，交互
        // 父组件通过 属性 传递给子组件参数
        // 子组件通过 发布事件 传递给父组件参数，前提是父组件需要先 注册事件

        // 局部组件
        var Local = {
            template: "
item-local
"
        }

        new Vue({
            el:"#todolist",
            // 注册局部组件
            components: {
                "local": Local
            },
            data:{
                inputValue: "",
                list: []
            },
            methods: {
                handleSubmit: function(){
                    this.list.push(this.inputValue);
                    this.inputValue = "";
                },
                handleDelete: function(index){
                    this.list.splice(index, 1)
                }

            }
        })
    

 确定
item-global
sf
fsdfsdf
item-local
sf 0
fsdfsdf 1