前端学习: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实例 插值表达式

        <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: "

    hello template {{ msg }}

    "
    , 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: "

    this is content

    "
    }, methods: { handleClick: function(){ this.content = "

    click

    "
    }, handleDoubleClick: function(){ this.content = "

    double click

    "
    } } })
    script> this is content

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

        <div id="bind" v-bind:title="'hello ' + title">this is titlediv>
    
        <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">togglebutton>
        <ul>
            <li v-for="item of list">{{item}}li>
    
            
            <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: "
  • 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) } } })
    script> 确定 item-global sf fsdfsdf item-local sf 0 fsdfsdf 1

    你可能感兴趣的:(javascript)