Fork me on github

vue简介

Vue简介

我给vue的总体评价是“简单却不失优雅，小巧而不乏大匠”，下面将围绕这句话给大家介绍Vue.js，希望能够激发你对Vue.js的兴趣。

Vue.js的作者为Evan You（尤雨溪），曾任职于Google Creative Lab，2016年9月3日，在南京的JSConf上，尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。虽然是Vue是一个个人项目，但在发展前景上个人认为绝不输于Google的AngularJs，现在是社区在维护Vue。


Vue.js是一个构建数据驱动的web界面的框架
Vue.js的目标是实现响应的数据绑定和组合的试图组件
Vue.js的核心是一个响应的数据绑定系统

 Vue.js主要负责的是上图绿色正方体ViewModel的部分，其在View层（即DOM层）与Model层（即JS逻辑层）之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。

当View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。相反，当Model层的数据发生改变时，其也会通过Data Bingings来监听并改变View层的展示。这样便实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在。

 

 Vue实例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue模板</title>
  <!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
  <script src="test/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{a}}</h1>
    <h2>{{b}}</h2>
</div>
</body>
<script>
    let vm = new Vue({
        el :'#app',
        data:{
           a:10,
            b:2
        },
        created: function () {
            console.log('a的值是:' +this.a)
        }

    });
</script>
</html>

 

 

 

 

Vue的操作样式以及指令

操作样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板</title>
</head>
<body>
<div id="app">
    <p v-on:click="btnClick" v-bind:style="v_style">点击p文字颜色变为绿色</p>
    <div v-on:click="btnClick" v-bind:style="v_style">点击div文字颜色变为绿色</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v_style: {
                color: 'black'
            }
        },
        methods: {
            btnClick: function () {
                this.v_style.color = 'green'
            }
        }
    })
</script>
</html>
View Code

 

文本指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板</title>
</head>
<body>
<div id="app">
    <!-- 插值表达式 -->
    <p>{{ msg1 }}</p>
    <p v-text="msg2"></p>
    <p v-html="msg3"></p>
    <p v-once="msg3"  v-on:mouseover="action">{{ msg3 }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg1: '**msg1**',
            msg2: '<b>**msg2**</b>',
            msg3: '<b>**msg3**</b>',
        },
        methods: {
            action: function () {
                // var msg = this.$data.msg4;
                this.msg3 = '<i>**new msg3**</i>'
            }
        }
    })
</script>
</html>

 

事件指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板</title>
</head>
<body>
<div id="app">
    <!-- v-on:事件名="函数名"  可以简写为 @事件名="函数名"  （v-on: => @）-->
    <p v-on:click="action1">{{ msgs[0] }}</p>
    <p @click="action2">{{ msgs[1] }}</p>

    <!-- 事件的传参 -->
    <ul>
        <li @click="liAction(100)">列表项1</li>
        <li @click="liAction(200)">列表项2</li>
        <li @click="liAction(300)">列表项3</li>
    </ul>

    <!-- 鼠标事件的对象：直接写函数名，默认将鼠标事件对象传入 -->
    <div @click="func1">func1</div>
    <!-- 鼠标事件的对象：一旦添加(),就必须手动传参，$event就代表鼠标事件对象 -->
    <div @click="func2($event, 'abc')">func2</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msgs: ['11111', '22222']
        },
        methods: {
            action1: function () {
                alert(this.msgs[0])
            },
            action2: function () {
                alert(this.msgs[1])
            },
            liAction: function (num, msg) {
                console.log(num, msg)
            },
            func1: function (ev) {
                console.log(ev)
            },
            func2: function (ev, msg) {
                console.log(ev);
                console.log(msg)
            }
        }
    })
</script>
</html>
View Code

 

属性指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <style>
        .rDiv {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .gDiv {
            width: 200px;
            height: 50px;
            background-color: green;
        }
        .br {
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 属性指令：用vue绑定属性，将属性内容交给vue处理 -->
    <!-- 语法：v-bind:属性名="变量"  (v-bind: 可以简写为 :) -->
    <p class="" style="" v-bind:owen="oo" :jason="jj"></p>


    <!-- class 属性 -->
    <p :class="c1" @click="action1"></p>
    <!-- 多类名 -->
    <p :class="[c1, c2]"></p>
    <!-- 'br' 固定写死的数据，不再是变量 -->
    <p :class="[c1, 'br']"></p>

    <!-- style 属性 -->
    <!-- 一个变量：该变量值为{},{}内部完成一个个属性的设置 -->
    <p class="gDiv" :style="s1">12345</p>
    <!-- 一个{}：{}内一个个属性有一个个变量单独控制 -->
    <p class="gDiv" :style="{fontSize: fs, color: c}">67890</p>

</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            oo: 'Owen',
            jj: 'Jason',
            c1: 'rDiv',
            c2: 'br',
            s1: {
                // 'font-size': '30px'
                fontSize: '30px',
                color: 'pink'
            },
            fs: '20px',
            c: 'orange'
        },
        methods: {
            action1: function () {
                if (this.c1 == 'rDiv') {
                    this.c1 = 'gDiv'
                } else {
                    this.c1 = 'rDiv'
                }
            }
        }
    })
</script>
</html>

 

表单指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板</title>
</head>
<body>
<div id="app">
    <!-- 表单指令：v-model="变量" -->
    <form action="">
        <p>
            <input type="text" v-model="val" name="user">
        </p>
        <p>
            <input type="text" v-model="val">
        </p>

        <!-- 单选框 v-model绑定的变量是单选框中某一个input的value -->
        <p>
            男: <input v-model="r_val" value="male" type="radio" name="sex">
            女: <input v-model="r_val" value="female" type="radio" name="sex">
        </p>

        <!-- 复选框 v-model绑定的变量是一个列表，列表存存放0到任一个复选框的value  -->
        <p>
            男: <input v-model="c_val" value="m" type="checkbox" name="h">
            女: <input v-model="c_val" value="f" type="checkbox" name="h">
            哇塞: <input v-model="c_val" value="mf" type="checkbox" name="h">
        </p>

        <button type="submit">提交</button>
    </form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            val: '',
            r_val: 'female',
            c_val: []
        }
    })
</script>
</html>
View Code

 

条件指令

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue模板</title>
  <!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
  <script src="test/vue.js"></script>


</head>
<body>
<div id="app">
    <p v-on:click="action1">{{ msg[0] }}</p>
    <p @click="action2">{{msg[1]}}</p>
    <ul>
        <li @click="liAction(100)">列表项1</li>
        <li @click="liAction(200)">列表项2</li>
        <li @click="liAction(300)">列表项3</li>
    </ul>
    <div @click="func1">func1</div>
    <div @click="func2($event,'abc')">func2</div>
    
</div>

</body>
<script>
    new Vue({
        el :'#app',
        data:{
            msg:['1111','2222']
        },
        methods:{
            action1:function () {
                alert(this.msgs[0])
            },
            action2:function () {
                alert(this.msg[1])
            },
            liAction: function (num, msg) {
                console.log(num,msg)
            },
            func1: function (ev) {
                console.log(ev)
            },
            func2: function (ev, msg) {
                console.log(ev);
                console.log(msg)
            }
        },
    });
</script>
</html>

条件指令补充

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板</title>
</head>
<body>
<div id="app">
    <p v-if="r1" key="p-r1">if条件</p>
    <p v-show="r2">show条件</p>
    <ul>
        <li v-if="tag==1">111</li>
        <li v-else-if="tag==2">222</li>
        <li v-else>333</li>
    </ul>
    <ul>
        <li @click="action('a')">a</li>
        <li @click="action('b')">b</li>
        <li @click="action('c')">c</li>
    </ul>
    <ul>
        <li v-show="flag =='a'">aaa</li>
        <li v-show="flag =='b'">bbb</li>
        <li v-show="flag =='c'">ccc</li>
    </ul>
</div>
</body>
<script src="test/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num:10,
            r1:false,
            r2:false,
            tag:1,
            flag:'a'
        },
        methods:{
            action:function (s) {
                this.flag=s
            }
        }
    })
</script>
</html>
View Code

循环指令

循环数组和自定义对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板</title>
</head>
<body>
<div id="app">
    <p>{{nums[2]}}</p>
    <ul>
        <li>{{nums[0]}}</li>
        <li>{{nums[1]}}</li>
        <li>{{nums[2]}}</li>
        <li>{{nums[3]}}</li>
        <li>{{nums[4]}}</li>
    </ul>
    <ul> <li v-for="num in nums">{{num}}</li></ul>
    <ul> <li v-for="(v,k,i) in people">{{v}}&nbsp;&nbsp;{{k}}&nbsp;&nbsp;{{i}}</li></ul>
</div>
</body>
<script src="test/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            nums:[1,2,3,4,5],
            people:{
                name:'owen',
                age:18,
                gender:'others'
            }
        }
    })
</script>
</html>
View Code

 

在Vue项目的开发中，我们使用的最多的应该就属Vue的指令了。通过Vue提供的常用指令，我们可以淋漓尽致地发挥Vue数据驱动的强大功能。以下便是图中常用指令的简单介绍：

（1）v-text: 用于更新绑定元素中的内容，类似于jQuery的text()方法

（2）v-html: 用于更新绑定元素中的html内容，类似于jQuery的html()方法

（3）v-if: 用于根据表达式的值的真假条件渲染元素，如果条件为false则不会渲染元素

（4）v-show: 用于根据表达式的值的真假条件显示隐藏元素，切换元素的 display CSS 属性

（5）v-for: 用于遍历数据渲染元素或模板

（6）v-on: 用于在元素上绑定事件，可以在P标签上绑定了一个点击事件

 

posted @ 2019-06-26 20:32  khan369  阅读(797)  评论(0)  编辑  收藏  举报