leo_logic

vue.js学习
1.理解挂载点、模板和实例<!DOCTYPE html> <html> <h...
扫描右侧二维码阅读全文
28
2019/03

vue.js学习

1.理解挂载点、模板和实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue/vue.js"></script> <!--在head中引入vue.js可以防止抖屏-->
    </head>
    <body>
        <!--挂载点、模板、实例之间的关系-->
        <div id="root">hello</div>
        <!--
            绑定后可以通过{{}}拿到data中的值,id=“root”表挂载点
            挂载点中的内容如<div id="root">hello{{msg}}</div>就是模板
        -->
        <script>
            new Vue({
                el:"#root" ,//el是指定去绑定那个程序,即绑定
                template:'<h1>hello{{msg}}</h1>', //实例在template中
                data:{
                    msg:"hello world"
                }
            })
        </script>
    </body>
</html>

2.数据、事件、方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue/vue.js"></script> <!--在head中引入vue.js可以防止抖屏-->
    </head>
    <body>
        <!--挂载点、模板、实例之间的关系-->
        <div id="root">
            {{number}}
            <h1 v-text="number"></h1>
            <h1 v-html="content"></h1>  <!-- v-txt是文本 v-html是标签加文本的解读 -->
            <h1 v-on:click="this.handleClick">{{click}}</h1><!-- 箭头函数()=>{alert(123)},v-on可以简写为@符号 -->
        </div> <!--这个{{number}}的表达式可以称为差值表达式-->
        
        <!--
            绑定后可以通过{{}}拿到data中的值,id=“root”表挂载点
            挂载点中的内容如<div id="root">hello{{msg}}</div>就是模板
        -->
        <script>
            new Vue({
                el:"#root" ,//el是指定去绑定那个程序,即绑定
                //template:'<h1>hello{{msg}}</h1>', //实例在template中
                data:{
                    msg:" world",
                    number:123 ,//任意定义数据
                    content:"<h1>hello</h1>",
                    click:"绑定事件"
                },
                methods:{
                    handleClick:function(){
                        alert("123")
                        this.click="word"
                    }
                }
            })
        </script>
    </body>
</html>

3.Vue中的属性绑定和双向数据绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性和双向数据绑定</title>
        <script src="vue/vue.js"></script>
    </head>
    <body>
        <div id="root" :title="title">
            <input v-model="content"/>  <!--v-model可以实现双向绑定-->
            <div>{{content}}</div>
        </div> <!--:v-bind简写为:-->
        
    </body>
    <script>
        new Vue({
            el:"#root",
            data:{
                title:"this is hello world",
                content:"this is content"
            }
        })
    </script>
</html>

4.Vue计算属性和侦听器版本1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计算属性和侦听器</title>
        <script src="vue/vue.js"></script> <!--在head中引入vue.js可以防止抖屏-->
    </head>
    <body>
        <div id="root">
            姓:<input  v-model:value="firstName"/>
            名:<input  v-model:value="lastName"/>
            <div>输入的姓:{{firstName}}</div>
            <div>输入的名:{{lastName}}</div>
        </div>
        <script type="text/javascript">
            new Vue({
                el:"#root",
                data:{
                    firstName:'',
                    lastName:''
                }
            })
        </script>
    </body>
</html>

5.Vue计算属性和侦听器版本2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计算属性和侦听器</title>
        <script src="vue/vue.js"></script> <!--在head中引入vue.js可以防止抖屏-->
    </head>
    <body>
        <div id="root">
            姓:<input  v-model:value="firstName"/>
            名:<input  v-model:value="lastName"/>
            <div>输入的姓:{{firstName}}</div>
            <div>输入的名:{{lastName}}</div>
            <div>输出全名:{{fullName}}</div>
            <div>统计:{{count}}</div>
        </div>
        <script type="text/javascript">
            
            new Vue({
                el:"#root",
                data:{
                    firstName:'',
                    lastName:'',
                    count:0
                },
                computed:{  //计算属性
                    fullName:function(){
                        return this.fristName + ' ' + this.lastName //当fristName和lastName没有输入时会默认使用上一次的缓存值
                    }
                },
                watch:{  //侦听器
                    fullName:function(){
                        this.count++
                    }
                }
            })
        </script>
    </body>
</html>

6.v-if,v-show,v-for指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue模板</title>
        <script src="vue/vue.js"></script> <!--在head中引入vue.js可以防止抖屏-->
    </head>
    <body>
        <div id="root">
            <div v-if="show">hello world</div>  
            <!--
                上面这段代码使用v-if和v-show的区别,v-if会从dom树种清楚,v-show设置了display的none属性,不会从dom树中清除
            -->
            <button @click="headleClick">toggle</button>
            <ul>
                <li v-for="(item,index) of list" :key="index">{{item}}</li>
            </ul>
        </div>
        
        <script>
            
            new Vue({
                el:"#root",
                data:{
                    show:true,
                    list:[1,2,3]
                },
                methods:{  //methods中定义函数
                    headleClick:function(){
                        this.show = !this.show; 
                    }
                }
            })
        </script>
    </body>
</html>

7.todolist小实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>todolist功能开发</title>
        <script src="vue/vue.js"></script> <!--在head中引入vue.js可以防止抖屏-->
    </head>
    <body>
        <div id="root">
            <div>
                <input v-model="inputValue"/>
                <button @click="handleSubmit">提交</button>
            </div>
            <ul>
                <li v-for="(item,index) of list" :key="index">{{item}}</li>
            </ul>
        </div>
        
        <script>
            new Vue({
                el:"#root" ,//绑定事件
                data:{
                    inputValue:'hello',
                    list:[]
                },
                methods:{
                    handleSubmit:function(){
                        this.list.push(this.inputValue)
                    }
                }
            })
        </script>
    </body>
</html>
Last modification:April 5th, 2019 at 04:24 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment