一、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'],