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

版权声明:本文为博主原创文章,欢迎转载,请注明出处 https://blog.csdn.net/mouday/article/details/80932868

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语句:<li v-for="(item, index) of list" :key="index">{{item}}</li>

实例

第一个Vue实例 插值表达式

    <div id="hello">{{ hello }}</div>  

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

hello world

挂载点, 实例, 模板

    <div id="root">
    <!-- 挂载点 -->
    </div>

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


hello template this is message

文本替换


    <div id="text" v-text="number"></div>

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

            }
        })
    </script>

123456

内容替换 事件绑定

方法 v-on:等价于@


    <div id="html" v-on:click="handleClick" @dblclick="handleDoubleClick" v-html="content"></div>

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


this is content

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

    <div id="bind" v-bind:title="'hello ' + title">this is title</div>

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


this is title

双向数据绑定


    <div id="db-bind">
        <input type="text" v-model="content">
        <div>{{ content }}</div>
    </div>

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



this is data doubldasdase bind
this is data doubldasdase bind

计算属性


    <div id="computed">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <div>{{ fullName }}</div>
        <div>{{ count }}</div>
    </div>

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

        })
    </script>

v-if v-show v-for


    <div id="vif">
        <div v-if="show">v-if从dom中移除(适合一次操作)</div>
        <div v-show="show">v-show从dom中隐藏(适合多次操作)</div>
    <button @click="handleClick">toggle</button>
    <ul>
        <li v-for="item of list">{{item}}</li>

        <!-- 以下方法增加key,可以提升性能 -->
        <li v-for="(item, index) of list" :key="index">{{item}}</li>
    </ul>
</div>

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

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

TodoList实例


    <div id="todolist">
        <input type="text" v-model="inputValue">
        <button @click="handleSubmit">确定</button>
        <!-- 普通方式添加 -->
        <ul>
           <global></global>
            <li v-for="(item, index) of list" :key="index">{{ item }}</li>
            <local></local>
        </ul>

        <!-- 通过全局组件 -->
        <ul>
           <todo-item 
                v-for="(item, index) of list" 
                :key="index" 
                :content="item" 
                :index="index"
                @delete="handleDelete"   
                ><!-- 通过全局组件 -->

           </todo-item> 
        </ul>
    </div>
    <script>

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

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

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

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

        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)
                }

            }
        })
    </script>

 确定
item-global
sf
fsdfsdf
item-local
sf 0
fsdfsdf 1
阅读更多

扫码向博主提问

彭世瑜

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • python
  • python爬虫
  • python全栈
去开通我的Chat快问

没有更多推荐了,返回首页