Vue基本用法

Vue.js基本概念：

首先通过将vue.js作为一个js库来使用，来学习vue的一些基本概念，我们下载了vue.js后，需要在页面上通过script标签引入vue.js。开发中可以使用开发版本vue.js。产品上线要换成vue.min.js。

<script type="text/javascript" src="../static/js/vue.js"></script>

Vue实例

每个Vue应用都是通过实例化一个新的Vue对象开始的：

<div id="app">
    {{message}}
    <button @click='change'>改变message的值</button>
</div>

window.onload=function(){
    #vm这个变量名不能用-，可以用下划线，比如vm-data不行，vm_data可以
    var vm= new Vue({
    el:"#app",
    data:{message:'hello world!'},
    methods:{
        change:function(){
            this.message='hello python'
        }   
    }
    })
}

<div id="vue_det">
    <h1>site:{{site}}</h1>
    <h1>url:{{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm=new Vue({
    el:"#vue_det",
    data:{site:"教育",url:'www.runoob.com'},
    methods:{
        details:function(){
        return this.site+"-学的不仅是技术，更是梦想！"
    }
    }
})
</script>   

button

<div id="a">
    {{m}}
    <button @click='change'>点击反转</button>
</div>
<script type="text/javascript">
    export default{
    data(){
    return{
        m:"asd"
    },
    methods:{
    change:function(){
    this.m=this.m.split("").reverse().join("")
    }
    }
}
}
</script>

v-for

###遍历下标和值，对于列表
<div v-for="(item,index) in arr" :key="index" @click="getIndex(item,index)">
    <p>{{item}}</p>
</div>

methods:{
    getIndex(item,index){
        console.log(item,index)
        //这里的item是点击获取当前值的每一项内容
        //这里的index是点击获取当前值的下标
    }
}


###遍历key,value,index
<div v-for="(value,key,index) in dict_data">
    <p>{{key}}值{{value}}下标为：{{index}}</p>
</div>

v-html能识别标签

<div v-html="h"></div>

h:'<h1>111</h1>'

v-bind:动态给标签绑定属性

可以简写为:** **

<div v-bind:class='a'></div>

a:'one'

该div的class属性为：one

简写的话就是
<div :class='a'></div>

---

当赋值的内容不含有标签时两个无区别

• 当有标签的时候{{}}不能解析标签
• 就要用v-html

v-if

<div v-if="ok">
asdjdsads
</div>

###
data:{ok:true}
这个div就会显示出来
如果是false就不会显示

v-if和v-show的区别

• v-show的元素始终会被渲染并保存在DOM中，v-show只是简单的切换元素的CSS属性display。
• 而v-if是真正的条件渲染，因为它会确保切换过程中条件块内的时间监听和子组件适当地被销毁和重建。

v-if和v-show的使用场合

一般而言，v-if有更高的切换开销，而v-show有更高的初始化渲染开销。

• 因此如果要非常的频繁切换，则使用v-show。
• 如果在运行的时候很少改变，则使用v-if较好。

定义变量需要注意的

• const t=1**
  **在下面不能改变t的值
• **let a=1 ****
  **只能定义一次a
• var a=1**
  **无限制

三目运算

{{5+5}}  直接在页面上显示10
{{ok ? 'yes':'no'}}  当你在vue里的data给ok赋值的时候给的true页面显示的就是yes  赋值是false时显示的就是no   也就是三目运算

三目运算在动态绑定时要以数组的形式  如下！！！
然后b也不是字符串类型  不然this.b=!this.b没有用

<div v-bind:class="[b?'m1':'m2']">
    我是
</div>
<button @click='change'>点击</button>

<script>
    data:function(){
    return{
    b:true  
    },
    methods:{
    change:function(){
    this.b=!this.b
}
}   
}
<style>
    .m1{
    background-color:pink;
}
    .m2{
    background-color:blue;
}
</style>

fliters过滤器和class各种绑定方式

<template>
    <div id="a">
        {{mes|add}}
        {{mess|add}}
        <div :class="'bg'|addcolor">
            我是你爸爸
        </div>
        <div :class="'ag'|addcolor">
            我是你爸爸2
        </div>
        <div :class="as">
            我是你爸爸3
        </div>
        <div :class="{'q':aa,'w':aaa}">
            我是你爸爸22
        </div>
    
    </div>
</template>
<script type="text/javascript">
    export default{
        name:"a",
        data:function(){
            return{
                mes:'asdsa',
                mess:'zxc',
                as:"as",
                aa:true,
                aaa:false
            }
        },
        filters:{
            add:function(v){
                return v+"$"
            },
            addcolor:function(s){
                return s+" hh"
            }
        }
    }
</script>
<style type="text/css">
    .hh{
        background-color: pink;
    }
    .bg{
        color: orange
    }
    .ag{
        color: red;
    }
    .as{
        font-size: 20px;
    }
    .q{
        background-color: orange
    }
    .w{
        font-size: 20px;
    }
</style>

<template>
    <div id="a">
        <p align="center" id="s"><b><i>Services</i></b></p>
        <br>
        <p align="center"><button type="text" :class="{'q':d1,'g':true}" v-model='z' @click='s1()'><span class="qq">{{z}}</span><span>{{z1}}</span></button></p>
        <p align="center"><button type="text" :class="{'w':d2,'g2':true}" v-model='x' @click='s2()'><span class="qq">{{x}}</span><span>{{x1}}</span></button></p>
        <p align="center"><button type="text" :class="{'e':d3,'g':true}" v-model='c' @click='s3()'><span class="qq">{{c}}</span><span>{{c1}}</span></button></p>
        <p align="center"><button type="text" :class="{'r':d4,'g2':true}" v-model='v' @click='s4()'><span class="qq">{{v}}</span><span>{{v1}}</span></button></p>
        <p align="center"><hr size=1 color=gray width=100%>
        <p align="center"><button type="text" :class="{'t':d5,'g2':true}" v-model='b' ><span class="qq">{{b}}</span><span>${{a5}}.00</span></button></p>
    </div>
</template>
<script type="text/javascript">
    export default{
        name:"a",
        data:function(){
            return{
                a1:300,
                a2:400,
                a3:250,
                a4:220,
                a5:0,
                aa1:0,
                aa2:0,
                aa3:0,
                aa4:0,
                z:"Web Development",
                z1:"$300.00",
                x:"Design",
                x1:"$400.00",
                c:"Integration",
                c1:"$250.00",
                v:"Training",
                v1:'$220.00',
                b:"total",
                b1:'$',
                d1:false,
                d2:false,
                d3:false,
                d4:false
            }
        },
        methods:{
            s1:function(){
                this.d1=!this.d1
                if (this.d1){
                    this.aa1=this.a1
                }
                else{
                    this.aa1=0
                }
                this.a5=parseInt(this.aa1)+parseInt(this.aa2)+parseInt(this.aa3)+parseInt(this.aa4)
            },
            s2:function(){
                this.d2=!this.d2
                if (this.d2){
                    this.aa2=this.a2
                }
                else{
                    this.aa2=0
                }
                this.a5=parseInt(this.aa1)+parseInt(this.aa2)+parseInt(this.aa3)+parseInt(this.aa4)
            },
            s3:function(){
                this.d3=!this.d3
                if (this.d3){
                    this.aa3=this.a3
                }
                else{
                    this.aa3=0
                }
                this.a5=parseInt(this.aa1)+parseInt(this.aa2)+parseInt(this.aa3)+parseInt(this.aa4)
            },
            s4:function(){
                this.d4=!this.d4
                if (this.d4){
                    this.aa4=this.a4
                }
                else{
                    this.aa4=0
                }
                this.a5=parseInt(this.aa1)+parseInt(this.aa2)+parseInt(this.aa3)+parseInt(this.aa4)
            }
        }
    }
</script>
<style type="text/css">
    #a{
        width: 600px;
        height: 600px;
        border: 1px solid blue;
        border-radius: 15px;
        margin: 0 auto;
    }
    #s{
        font-size: 20px;
    }
    .g{
        display: block;
        width: 400px;
        height: 65px;
        border: 2px solid yellow;
        border-radius: 6px;
        background-color: orange;
        margin-top: 30px; 
        color:gray;
        font-size: 18px;
        font-weight: bold;
    }
    .g2{
        display: block;
        width: 400px;
        height: 65px;
        border: 2px solid yellow;
        border-radius: 6px;
        background-color: pink;
        margin-top: 30px;
        color:gray;
        font-size: 18px;
        font-weight: bold;
    }
    span{
        position: absolute;
        left: 1075px;
    }
    .qq{
        position: absolute;
        left: 800px;
    }
    .q{
        background-color: green;
    }
    .w{
        background-color: green;
    }
    .e{
        background-color: green;
    }
    .r{
        background-color: green;
    }

</style>

form实例

<template>
    <div id="a">
        <form v-on:submit.prevent="submitmes()" action="http://www.baidu.com" method="post">
            用户名:<input type="text" name="name" v-model="name">
            <br>
            密码:<input type="password" name="userpassword" v-model="userpassword">
            <br>
            性别：<input type="radio" name="sex" v-model="sex" value="男">男
            <input type="radio" name="sex" v-model="sex" value="女">女
            <br>
            爱好:<input type="checkbox" name="joy" v-model="joy" value="唱歌">唱歌
            <input type="checkbox" name="joy" v-model="joy" value="看书">看书
            <input type="checkbox" name="joy" v-model="joy" value="跳舞">跳舞
            <br>
            所属部门:<select name="classid" v-model="classid">
                <option value="1">一年级</option>
                <option value="2">二年级</option>
                <option value="3">三年级</option>
            </select>
            <button type="submit">submit</button>
        </form>
    </div>
</template>
<script type="text/javascript">
    export default{
        name:"a",
        data:function(){
            return{
                name:'',
                userpassword:'',
                sex:'',
                joy:[],
                classid:''
            }
        },
        methods:{
            submitmes:function(){
                console.log(this.name)
                console.log(this.userpassword)
                console.log(this.sex)
                console.log(this.classid)
                var list=[]
                this.joy.forEach(function(i){
                    list.push(i)
                })
                console.log(list)
            }
        }
    }
</script>

阻止单击事件继续传播

<a v-on:click.stop="doThis"></a>

<div id="app">
        <div v-on:click="dodo">
            <button v-on:click="doThis">阻止单击事件继续传播</button>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: "Vue.js"
            },
            methods: {
                doThis: function () {
                    alert("noclick");
                },
                dodo: function () {
                    alert("dodo");
                }
            }
        });
    </script>
    
将会先弹出“noclick”,再弹出“dodo”。



<div id="app">
        <div v-on:click="dodo">
            <button v-on:click.stop="doThis">阻止单击事件继续传播</button>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: "Vue.js"
            },
            methods: {
                doThis: function () {
                    alert("noclick");
                },
                dodo: function () {
                    alert("dodo");
                }
            }
        });
    </script>
    
只弹出“noclick”

提交事件不再重载页面

<form v-on:submit.prevent="onSubmit"></form>

今天看vue文档时，事件修饰符里面有一部分看不明白，特地写了个demo测一下，一些新手心得，互相学习。**
**疑问如下：

vue事件修饰符的v-on:click.prevent.self与v-on:click.self.prevent区别

• v-on:click.prevent.self的demo如下：

<div id="box">
    <div @click="alert(1)">
    <a href="/#" @click="alert(2)">a标签
        <div @click="alert(3)">div标签</div>
    </a>
    </div>
</div>

此时点击a标签会依次弹出2，1，跳转。点击div标签会依次弹出3，2，1，跳转。这发生了事件冒泡。

• 咱们看一下加上v-on:click.prevent.self之后的：

<div @click="alert(1)">
    <a href="/#" @click.prevent.self="alert(2)">a标签
        <div @click="alert(3)">div标签</div>
    </a>
</div>

此时点击a标签会依次弹出2，1。点击div标签会依次弹出3，1。此时各位看官已经发现，a标签不仅没有冒泡，也没有跳转，这就是官网说的会阻止所有的点击。

• v-on:click.self.prevent的demo如下：

<div @click="alert(1)">
                  <a href="/#" @click.self.prevent="alert(2)">a标签
                  <div @click="alert(3)">div标签</div>
                </a>
            </div>

点击div标签会依次弹出3，1，跳转。此时a标签没有响应弹框，但是发生了跳转，这就是官网说的只会阻止对元素自身的点击。