乐趣区

关于前端:干货前端开发之VUE介绍与使用

jiezi

一、Vue 介绍

1、什么是 Vue

能够独立实现前后端分离式 web 我的项目的 JavaScript 框架

2、学习 Vue 的起因

三大支流框架之一：Angular React Vue
先进的前端设计模式：MVVM
能够齐全脱离服务器端，以前端培训代码复用的形式渲染整个页面：组件化开发

3、Vue 的特点

单页面 web 利用
数据驱动
数据的双向绑定
虚构 DOM

二、Vue 应用一

2.1 第一个 Vue 页面与事件

<div id=”app”>

<h1>{{msg}}</h1>
<h2 v-on:click="clickAction"> 这是一条内容 </h2>
<h2 v-on:mouseover="clickAction"> 这是一条内容 </h2>

</div>

<script src=”js/vue.js”></script>
<script>

new Vue({
    el: '#app',
    data:{msg: 'this is first vue!!'},
    methods:{clickAction:function () {alert('123123')
        }
    }
})

</script>

2.2 Vue 操作款式与文本操作

<div id=”app”>

<p v-on:click="btnClick" v-bind:style="v_style"> 点击变换文字色彩 1 </p>
<p v-on:click="btnClick" v-bind:style="v_style"> 点击变换文字色彩 2 </p>
<p v-on:click="changeWord">{{msg1}}</p>
<p v-on:click="changeWord" v-once="msg1">{{msg1}}</p>

</div>

<script>

new Vue({
    el: '#app',
    data:{
        msg: 'this is first vue!!',
        msg1:'点击变换文字色彩 3',
        msg2: '其实是偷偷给你换了字！',
        v_style:{color:'green'}
    },
    methods:{btnClick:function () {if (this.v_style.color == 'green'){this.v_style.color = 'red';}else{this.v_style.color = 'green';}
        },
        changeWord:function () {this.msg1 = this.msg2;}
    },
});

</script>

2.3 Vue 事件指令

<div id=”app”>

<p v-on:click="eventAction1" v-bind:style="v_style">{{msg[0] }}</p>
<p @click="eventAction2">{{msg[1] }}</p>

<ul>
    <li @click="liAction(100)"> 第一个 li</li>
    <li @click="liAction(200)"> 第二个 li</li>
    <li @click="liAction(300)"> 第三个 li</li>
</ul>
<!-- 鼠标事件的对象：间接写函数名，默认将鼠标事件对象传入 -->
<div @click="func1">function1</div>
<!-- 鼠标事件的对象，一旦增加()，就必须手动传参，$event 就代表鼠标事件对象 -->
<div @click="func2">function2</div>

</div>

<script>

new Vue({
    el: '#app',
    data:{msg: ['这是 msg 外面的第一个值', '这是 msg 外面的第二个值'],
        v_style:{color:'green',}
    },
    methods:{eventAction1:function () {console.log('this is eventAction1');
        },
        eventAction2:function () {console.log('this is eventAction2');
        },
         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>

2.4 属性指令

<div id=”app”>

<!-- 属性指令：用 vue 绑定属性，将属性内容交给 vue 解决 -->
<!-- 语法：v-bind: 属性名 ="变量"  (v-bind: 能够简写为 :) -->
<p class=""style="" v-bind:theFirst="F"  :theSecond="S">1</p>

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

<!-- style 属性 -->
<!-- 一个变量：该变量值为 {}，{} 外部实现一个个属性的设置 -->
<p class="gDiv" :style="s1"> 这是测试 style 属性 </p>
<!-- 一个 {}：{} 内一个个属性有一个个变量独自管制 -->
<p class="gDiv" :style="{fontSize:fs, color: c}"> 这也是测试 style 属性 </p>

</div>

<script>

new Vue({
    el: '#app',
    data:{msg: ['这是 msg 外面的第一个值', '这是 msg 外面的第二个值'],
        v_style:{color:'green',},
        F: 'First',
        S: 'Second',
        c1: 'rDiv',
        c2: 'br',
        s1: {
            // 'font-size': '20px'
            fontSize: '20px',
            color: 'pink'
        },
        fs: '15px',
        c: 'orange'
    },
    methods:{action1:function () {if(this.c1 == 'rDiv'){this.c1 = 'gDiv';}else{this.c1 = 'rDiv';}
        },
    },
});

</script>

<div id=”app”>
<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>

new Vue 外面的 data 下：
val: ”,
r_val: ‘female’,
c_val: [‘m’,’mf’],

退出移动版