vue学习01

作者: rainbowz | 来源:发表于2019-02-06 21:59 被阅读7次

一

1v-cloak 插值表达式闪烁问题
v-text 默认是没有闪烁问题会覆盖原本的内容插值表达式不会
v-html

<div id="app">
            <p>{{msg}}</p>
            <p v-clock>===={{msg}}===</p>
            <p v-html="msg2">hello world</p>
            <p v-text="msg"></p>
            <p ></p>
        </div>
    </body>
    <script>
        
        var vm= new Vue({
            el:'#app',
            data:{
                msg:'1233',
                msg2:'<h1>天行健 君子以自强不息!<h1>'
            }
         })
    </script>

图片.png
2 v-bind，v-on指令学习

<button v-bind:title="msg">button</button>

二

v-bind绑定属性 :缩写
v-on绑定事件 @缩写

<button v-bind:title="msg+'兽人永不为奴'" v-on:click="say">button</button>

v-on:click点击事件
v-on:mouseover鼠标覆盖事件

图片.png

三

3跑马灯效果制作


<p>{{msg}}</p>
            <button @click="lang()">lang</button>
            <button @click="stop()">stop</button>

var vm= new Vue({
            el:'#app',
            data:{
                msg:'天青色等烟雨',
                msg2:'<h1>天行健 君子以自强不息!<h1>',
                interValID:null
            },methods:{
                say:function(){
                    alert('hello vue.js!')
                },
                show:function(msg){
                    alert(msg)
                    
                },
                lang(){
                    if(this.interValID!=null)return;
                    
                    this.interValID=setInterval( () => {
                        var start=this.msg.substring(0,1)
                        var end=this.msg.substring(1)
                        this.msg=end+start
                        console.log(this.msg)
                    },500)
                },
                stop(){
                    clearInterval(this.interValID)
                    this.interValID=null;
                }
            }
         })

开启定时器停止定时器
截取到后面所有字符串substring(0,1)
清除之后吧intervalId置为null

vm实例会监听自己身上data中所有数据的改变只要数据一发生改变，就会自动把最新的数据，从data上同步到页面中去

图片.png

setInterval( () =>
=> es6箭头函数

四

4事件修饰符的介绍

.stop阻止冒泡
.prevent阻止默认行为
.capture 捕获机制
.self实现只有点击当前元素的时候才会触发的函数
.once

实例
没有使用.stop

图片.png

<style type="text/css">
            .inner{
                height: 150px;
                background-color: #009A61;
            }
        </style>

<div id="app">
            <div class="inner" @click="divhandler">
                <input type="button" value="戳他" @click.stop="btnhandler"></input>
            </div>
        </div>

<script>
    var vm =new Vue({
        el:'#app',
        data:{
            
        },
        methods:{
            divhandler(){
                console.log('触发inner div')
            },
            btnhandler(){
                console.log('触发 btn 按钮的事件')
            }
            }
    })
    
</script>

图片.png

stop阻止事件往外冒
prevent 阻止默认事件如网址跳转 submit表单

<a href="https://www.baidu.com"@click="linkclick">百度一下</a>

.self 只有点击当前元素才会触发事件处理函数

<div class="inner" @click.self="divhandler">
                <input type="button" value="戳他" @click="btnhandler"></input>
            </div>

此时只会触发btn按钮的事件不会触发外部的事件，要想触发外部的div事件可以点击 inner 即inner.css区域即可触发外部的innerhandler事件

图片.png

<a href="https://www.baidu.com"@click.preven.once="linkclick">百度一下</a>
、此时只能阻止一次默认行为

比较:
click.prevent.once
click.once.prevent
其实没有区别
只触发一次事件处理函数

<style type="text/css">
            .inner{
                height: 150px;
                background-color: #009A61;
            }
            .outer{
                padding: 40px;
                background-color: red;
            }
        </style>
<div id="app">
            
            
            <div class="outer"@click="divhandler2">
                <div class="inner" @click="divhandler">
<input type="button" value="戳他" @click.self="btnhandler"></input>
.self只会阻止自己身上冒泡行为的触发 并不会阻止真正冒泡的行为
.stop会阻止真正的冒泡行为
<input type="button" value="戳他" @click.stop="btnhandler"></input>
                </div> 
            </div>
        </div>

此时只会出现btn按钮的事件
inner
outer
都被stop阻止了

图片.png

五

讲解v-model实现表单元素的数据双向绑定
v-bind只能实现数据的单项绑定从 M 自动绑定到V中无法实现数据的双向绑定
v-mode 实现表单元素和Model中数据的双向数据绑定
v-model只能运用在表单元素中（input(radio,text,address,email) select checkbox textarea）

    <div id="app">
            <h4>{{msg}}</h4>
            <!-- <input  type="text"  v-bind:value='msg' style="width: 10%;"/> -->
            <input  type="text"  v-model="msg" style="width: 10%;"/>
        </div>

<script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'HELLO'
            },
            methods:{
                
            }
        })
    </script>

v-model实现计算器

<div id="app">
            <!-- <h4>{{msg}}</h4>
            <!-- <input  type="text"  v-bind:value='msg' style="width: 10%;"/> -->
        <!--    <input  type="text"  v-model="msg" style="width: 10%;"/> --> 
        <input type="text"  v-model="n1"/>
        
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2" />
        
        
        <input type="button" value="=" @click="calc"/>
        <br />
        <input type="text" v-model="resu" />
        </div>
    </body>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                /* msg:'HELLO' */
                n1:0,
                n2:0,
                resu:0,
                opt:'+'
            },
            methods:{
                calc(){
                    
                    /* switch(this.opt){
                        case '+':
                        this.resu=parseInt(this.n1)+parseInt(this.n2)
                        break;
                        
                        case '-':
                        this.resu=parseInt(this.n1)-parseInt(this.n2)

                        break;
                        
                        case '*':
                        this.resu=parseInt(this.n1)*parseInt(this.n2)

                        break;
                        
                        case '/':
                        this.resu=parseInt(this.n1)/parseInt(this.n2)

                        break;
                        
                        
                    }
                     */
                     var str='parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
                    this.resu=eval(str); 
                }
            }
        })
    </script>

n1,n2,resu默认都为0 均实现数据双向绑定
v-model =n1
v-model n2
v-model =resu
select 也实现数据双向绑定 v-model=opt

图片.png

六通过属性绑定为元素设置class样式

<style>
            .red{
                color: red;
            }
            .thin{
                font-weight: 200;
            }
            .italic{
                font-style: italic;
            }
            .active{
                letter-spacing: 0.7em;
            }
        </style>
<div id="app">
            <h1 :class="{red:true, thin:true,italic:true,active:true}">
                不要问我从哪里来heyjude
            </h1>
            
            <!-- 三元表达式 -->
            <h1 :class="['thin',italic,flag?'active':'']">不要问我从哪里来heyjude</h1>
            
            <!-- 传的是一个对象  避免三元表达式的麻烦   flag 是data中的flag属性，默认为true -->
            <h1 :class="['thin',italic,{'active':flag},'red']">不要问我从哪里来heyjude</h1>
            <h2>{{msg}}</h2>
        </div>

<script>
        new Vue({
            el:'#app',
            data:{
                flag:true,
                msg:"zoro"
                
            },
            methods:{
                
            }
        })
    </script>

图片.png

设置行内样式

<div id="app">
            <h1 :style="[s1]">兽人永不为奴!</h1>
            <h2 :style="{color:'red','font-weight':100}">hey jude</h2>  传入多个属性
</div>
<script>
        new Vue({
            el:'#app',
            data:{
                s1:{ 'color':'green','font-weight':200},
                s2:{'font-style':'italic'}
            },
            methods:{
                
            }
        })
        
    </script>

图片.png

七

v-for的使用方式

<div id="app">
            <table>
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>sex</th>
                </tr>
                <tr v-for=" p in people">
                    <td>{{p.name}}</td>
                    <td>{{p.age}}</td>
                    <td>{{p.sex}}</td>
                </tr>
            </table>
            <p v-for="(item, i) in list">索引值{{i}}--每一项{{item}}</p>
            <p v-for="count in 4">这是第{{count}}次循环</p>
            <p v-for="(val,key) in user">值是:{{val}}--键是:{{key}}</p>
        </div>
<script>
        new Vue({
            el:'#app',
            data:{
                people:[{
                    name:'Lee',
                    age:12,
                    sex:'MALE'
                },{
                    name:'ZORO',
                    age:11,
                    sex:'MALE'
                },{
                    name:'XIN',
                    age:21,
                    sex:'FEMALE'
                }],
                list:[1,2,3,4,5,6,7,8],
                user:{
                    name:'周笔畅',
                    age:17,
                    sex:'Male'
                }
            },
            
            methods:{
                
            }
        })
        /* [].forEach((item,i)=>{}) */
    </script>

v-for循环普通数组 v-for循环对象数组 v-for迭代数字(count值从1 开始不是从0开始)

图片.png

v-for添加元素

<div id="app">
            
            <div>
                <label>Id</label>
                <input type="text" v-model="id"/>   
                
                <label>Name</label>
                <input type="text" v-model="name"/>
                
                <label>submit</label>
                <input type="button" @click="add" value="添加"/>
            </div>
            
            <p v-for=" x in xiaoming" :key="x.id">
                
                <input type="checkbox" />{{x.id}}--{{x.name}}
            </p>
        </div>

<script>
        new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                xiaoming:[
                    {id:1,name:'李斯',},
                    {id:2,name:'荀子',},
                    {id:3,name:'韩非',},
                    {id:4,name:'嬴政',}
                ]
            },methods:{
                 add(){
                    this.xiaoming.unshift({id:this.id,name:this.name})
                } 
            }
        })
    </script>

图片.png

v-if 每次都会重新删除或创建元素
v-show每次不会重新进行DOM的删除和创建操作只是切换了元素的display :none样式

设计频繁的切换不适用v-if
v-if有较高的切换性能消耗
v-for有较高的初始渲染消耗

图片.png
https://www.bilibili.com/video/av36650577/?p=20
https://github.com/shy1118999/vue.js

图片.png

vue学习01

一

二

三

四

五

六通过属性绑定为元素设置class样式

七

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

日常积累

vue