vue

前端框架

主流框架:angular(facebook家的),react(github家的),vue(尤雨溪的)

vue:有前两大框架的有点,摒弃了缺点,但是没有前两大框架健全,

vue有点:中文API,单页面应用,组件化开发,数据双向绑定,虚拟DOM,数据驱动

VUE

导入

下载:https://cn.vuejs.org/进入官网,起步,下载
导入,<script src="js/vue.js"></script>
之后可以创建vue实例并通过el方法挂载,进而控制.

vue的操作

插值表达式

<body>
    <div id="test">
        <p>{{ msg }}</p>
        <p>{{ num + 1 }}</p>
        <p>{{ msg + num}}</p>
        <p>{{ msg[1] }}</p>
        <p>{{ msg.split('')}}</p>

    </div>


</body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#test",
            data:{
                msg:"orange",
                num:10
            }
        })
    </script>
>>>
orange

11

orange10

r

[ "o", "r", "a", "n", "g", "e" ]

注意:当使用vue语法时,{{}}中如果什么都不放,语法解析不出来,会显示{{}}.

文本指令

{{ }}直接传值

v-text:不能解析html语法,直接传值.

v-html:可以解析html语法.

<div id="text">
    <p v-text="info">123</p>
    <p v-html="info"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue ({
        el:"#text",
        data:{
            info:'<i>infor</i>',
        },
    })
</script>
>>>
<i>infor</i>

infor

而且代码从上至下执行,如果原p标签中有值,会被后面执行的v-html或者v-text覆盖掉

v-once

无论多少操作,只渲染一次.

<body>
<div id="text">
    <p v-once v-on:click="pClick">{{ msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue ({
        el:"#text",
        data:{
            info:'<i>infor</i>',
            msg:'1111'
        },
        methods:{
            pClick:function () {
                this.msg = "222"
            }
        }
    })
</script>
>>>
1111

渲染一次1111,后面再也改变不了了

事件指令

事件指令 v-on:事件名="方法变量"

简写: @事件名="方法变量"

<body>
<div id="event">
    <p v-on:click="f1">{{ msg }}</p>
    <p @click="f1">{{ msg }}</p>
    <hr>
    <p @click="f2($event,'第一个')">{{ info }}</p>
    <p @click="f2($event,'第二个')">{{ info }}</p>

</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue ({
        el:"#event",
        data:{
            msg:"点击事件",
            info:"是我"
        },
        methods:{
            f1(){
                this.msg ="点击了"
            },
            f2(ev,args){
                this.info = args + "点击了"
            }
        }
    })
</script>

关于鼠标的操作:@后面的

方法	操作
mouseove	鼠标悬浮
mouserout	鼠标移开
mousedown	鼠标点下去
mouseup	鼠标抬起来
mousemove	鼠标在上面移动
contextmenu	右键点击

@事件="变量($event,...)"

当事件变量不添加(),系统默认传入一个事件对象:$event

当事件变量后手动添加了(),就告诉了系统不需要再传入事件对象,但是可以手动传入事件对象.

属性指令

v-bind:属性名="变量"

简写 :属性名="变量"

简单使用

<body>
<div id="property">
    <p v-bind:title="pTitle" :abc="def">简答使用</p>
</div>
</body>
    <script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#property",
        data:{
            pTitle:"简单使用"
        }
    })
</script>

class属性绑定

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1 {
            200px;
            height:200px;
            background-color: orange;
        }
        .d2 {
            border-radius: 50%;
        }
        .d3 {
            border-right: 20%;
        }
    </style>
</head>

<body>
<div id="property">
    //可以通过传值的方式传多个
    <p :class="c0"></p>
    //多类名可以使用[]语法,采用多个变量来控制
    <p :class="[c1,c3]"></p>
    //[]中也可以使用常量
    <p :class="['d1',c3]"></p>
    //{类名:布尔值} 可以控制某类名是否起作用
    <p :class="['d1',{d2:is_true}]" @click="is_true=!is_true"></p>
    //点击事件改变src属性
    <p @click="changeImg">大长腿</p>
    <img :src="img_src" alt="">
    //style控制样式样式
    <p :style="myStyle">样式属性</p>
    <p :style="{w,height:h,backgroundColor:bgc}">样式属性</p>
</div>
</body>
    <script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#property",
        data:{
            c0:"d1 d2",
            c1:'d1',
            c2:"d2",
            c3:"d3",
            is_true:true,
            img_src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
            myStyle: {
                 '100px',
                height: '100px',
                backgroundColor: 'red'
            },
            w: '200px',
            h: '100px',
            bgc: 'green'
        },
        methods:{
            changeImg(){
                this.img_src='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
            }
    })
</script>

注意:data的style中:左侧比如backgroundColor:属性名:驼峰体="减号连接体"

is_true这种也可以不引号