-
初步了解Vue.js框架（渐进式前端框架）
Vue.js是一种轻量级的前端MVVM框架。同时吸收了React（组件化）和Angular（灵活指令页面操作）的优点。是一套构建用户界面的渐进式框架，以数据驱动DOM，Vue 采用自底向上增量开发的设计。
// vue配套的一些插件
Vue Router 全局路由
Vuex 组件与组件间通信
Vue Cookie cookie的管理
// 使用Vue
导入 ==> 创建Vue对象 ==> 挂载到指定的页面标签（如果操作整个页面，可将整个页面用一个标签嵌套）
示例：<script src="js/vue.js"></script> <script> new Vue({ el: '.wrapper' // 只能控制检索到的第一个class为wrapper的页面结构 }) </script>
// 注意：由于挂载点与对象是一一对应的关系，所以在挂载点应该采用id来做挂载点标识，不应该用class。
-
Vue对象
vue 对象的属性有：
el： 挂载点，与页面建立联系
data：属性数据，控制挂载点属性，向页面提供数据
methods：方法，控制挂载点的事件
computed：计算属性，监听方法内部属性的改变
watch：监听属性，监听外部方法对应的属性的改变
<script> var vue = new Vue({ el: '#app', data: { msg: '12345', info: '上山打老虎' } }); console.log(vue.$data.msg); console.log(vue.msg); </script>
vue.$data.msg与vue.msg的区别？
一个被Vue对象控制的页面结构就称之为一个组件。
组件与控制该组件的Vue对象是一一对应的关系，vue.$data.msg对象的属性，vue.msg则是组件中的。？
对象的属性具体用法实例
<div id="app"> <p> <input type="text" v-model="firstName"> </p> <p> <input type="text" v-model="lastName"> </p> <input type="text" v-model="aaa"> <!--姓名 = firstName + " " + lastName--> <h2>{{ firstName + " " + lastName }}</h2> <!-- 将姓名替换为 firstName + " " + lastName --> <!--<h2>{{ fullName() }}</h2>--> <h2>{{ fullName }}</h2> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { aaa: '', firstName: '', lastName: '', // fullName: '姓名' }, // methods: { // fullName: function () { // return this.firstName + " " + this.lastName // } // } // 一个属性变量的值依赖于多个属性变量的值 // 特殊点: data绑定的属性值是固定的, computed绑定的属性值是动态的(函数的返回值) computed: { fullName: function () { this.aaa; console.log("监听到内部拥有的变量在改变"); if (this.firstName || this.lastName) { return this.firstName + " " + this.lastName } return "姓名" } }， watch: { // 为fullName该属性绑定了一个监听事件 // fullName的定义还是在data或computed // fullName属性值一旦改变，绑定的监听事件就会被调用执行 // 多个变量依赖于一个变量 fullName: function () { console.log("该方法被调用了"); f_l_arr = this.fullName.split(" "); this.firstName = f_l_arr[0]; this.lastName = f_l_arr[1]; } } });
computed和watch的区别：computed是监听方法内部属性变量的改变，然后影响外部的属性变量的改变，实现属性的动态的属性值。watch则是监听对应的变量的属性值是否改变。
-
Vue中的指令
vue 中指令的表示方法 V-指令
指令的类别：
文本指令： v-text v-html v-once 插值表达式 {{ }}
<p v-text="txt"></p> <p v-html="hml"></p> <p>{{ num + 1 }}</p> <p>{{ num + "12345" }}</p> <p>{{ num / 5 }}</p> <p>{{ num + msg }}</p> <script> new Vue({ el: '#app', data: { msg: "vue的变量", txt: "vue的text指令", hml: "<b>vue的html指令</b>", num: 1000 } }); </script> v-text 纯文本指令 v-html="hml" 解析HTML格式的文本 指令 v-once 数据一旦渲染就不能改变 插值表达式 {{ num }} 获取数据，类似于引用文本
事件指令：v-on:事件名 简写 @事件名
-- v-on="事件绑定的变量名"
-- :事件名 来设置事件触发的条件
-- 整体语法: v-on:事件名="事件绑定的变量名"
-- 事件绑定的变量名 由 methods来提供具体的方法实现
在事件指令中，变量名后可以给参数， 例如：
@click='btnClick($event, 自定义参数们)
所以在使用事件指令的更能灵活的实现不同布局切换和数据的调用
<div id="app"> <p v-on:click="action1" v-text="msg1"></p> <p v-on:dblclick="action2" v-text="msg2"></p> <p @mouseenter="action3" v-text="msg3" style="background: red"></p> </div> <script src="js/vue.js"></script> <script> var vue = new Vue({ el: '#app', data: { msg1: "点击事件", msg2: "双击事件", msg3: "鼠标悬浮事件", }, methods: { action1: function () { alert("天楚狂") }, action2: function () { alert("地楚狂") }, action3: function () { alert("人楚狂") }, } }); </script>
属性指令： v-bind:属性名 简写 :属性名
-- v-bind="属性绑定的变量名"
-- :属性名 来设置事件触发的条件 (style | class | 自定义属性)
-- 整体语法: v-bind:属性名="属性绑定的变量名"
-- 属性绑定的变量名 由 data来提供具体的方法实现
<div id="app"> <!-- 自定义的属性 --> <p v-bind:owen="tag">{{ msg }}</p> <!--<a href="/static/article/{{ article.id }}"></a>--> <a :href="url"></a> <!--<a :href="'/add_article/' + abc"></a>--> <a :href="'/static/article/' + aid">前往{{ aid }}篇文章</a> <button @click="btnClick">获取第100篇文章的id</button> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: "属性指令", tag: 1, url: '/static/article/1', aid: 10 }, methods: { btnClick: function () { // this.$data.aid = 100; this.aid = 100; } } }); </script>
// 例子中利用了事件指令和属性指令的结合，实现了数据的改变
表单指令： 文本指令不需要绑定东西: v-text="变量名"
属性指令需要绑定属性: v-bind:属性名="变量名" => :属性名="变量名"
事件指令需要绑定事件: v-on:事件名="变量名" => @事件名="变量名"
表单指令需要绑定表单元素的value: v-model:value="变量名" => 只对value进行绑定,
-- 所以直接书写 v-model="变量名"
<body> <div id="app"> <input type="text" value="初始value" v-model="msg"> <input type="text" value="初始value" v-model="msg"> <p>{{ msg }}</p> <!-- v-model针对于表单元素 --> <form action="" method="get"> <!-- 1、双向绑定：服务于文本输入框 --> <!-- v-model存储的值为输入框的value值 --> <div> <input type="text" name="usr" v-model="in_val"> <input type="password" name="ps" v-model="in_val" > <textarea name="info" v-model="in_val"></textarea> </div> <!-- 2、单选框 --> <div> <!-- 单选框是以name进行分组，同组中只能发生单选 --> <!-- v-model存储的值为单选框的value值 --> 男：<input type="radio" name="sex" value="male" v-model="ra_val"> 女：<input type="radio" name="sex" value="female" v-model="ra_val"> <p>{{ ra_val }}</p> </div> <!-- 3、单一复选框 --> <!-- v-model存储的值为true|false --> <!-- 或者为自定义替换的值 --> <div> <input name="sure" type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" /> {{ sin_val }} </div> <!-- 4、多复选框 --> <!-- v-model存储的值为存储值多复选框value的数组 --> <div> <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' /> <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' /> <input type="checkbox" value="不挑" name="cless" v-model='more_val' /> {{ more_val }} </div> <input type="submit" value="提交"> </form> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { info: "一次性数据", msg: "改变后的value", in_val: '', // 默认值可以决定单选框默认选项 ra_val: 'male', // 默认值为true，单一复选框为选中，反之false为不选中 sin_val: '', // 数组中存在的值对应的复选框默认为选中状态 more_val: ['喜好女的','不挑'] }, methods: { } }); </script>
条件指令： v-show | v-if v-else-if v-else
v-if 在消失的时候不会被渲染， v-show会以 display：none 渲染页面
<style> p { width: 200px; height: 200px; background: orange; } [v-cloak] { display: none; } div { width: 400px; height: 100px; } .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; } </style> <div id="app" v-cloak> <!-- 条件指令： v-if v-show --> <button @click="btnClick">切换</button> <!-- v-if在消失的时候,不会被渲染, 而v-show以display: none;进行渲染 --> <p v-if="is_open"></p> <p v-show="is_open"></p> <hr> <!-- 事件绑定函数, 可以加括号(), 一旦加()就代表要传入参数, 系统就不再传入事件参数 --> <!--如果想传入事件参数, 1:不加括号 2.加括号需用$event--> <button @click="changeColor('red', $event)">红</button> <button @click="changeColor('yellow')">黄</button> <button @click="changeColor('green')">绿</button> <div class="red" v-if="color == 'red'">红体</div> <div class="yellow" v-else-if="color == 'yellow'">黄体</div> <div class="green" v-else>绿体</div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { is_open: 0, color: 'red' }, methods: { btnClick: function () { this.is_open = !this.is_open; }, // a1: function () { // this.color = 'red' // }, // a2: function () { // this.color = 'yellow' // } changeColor: function (color, ev) { console.log(color); console.log(ev); // this.color = color; } } }); </script>
循环指令：v-for="(ele, index) in eleArr" | v-for="(v, k, i) in dic"
<div id="app"> <!-- 循环指令：v-for="obj in objs" --> <h3>{{ list[4] }}</h3> <h3>{{ dic['gender'] }} {{ dic.gender }}</h3> <hr> <!--遍历数组--> <!--<p v-for="cless in list">--> <!--<span>--> <!--<b>{{ cless }}</b>--> <!--</span>--> <!--</p>--> <p v-for="(cls, index) in list"> <span> <b>{{ index }} : {{ cls }}</b> </span> </p> <!--遍历对象(字典)--> <p v-for="(value, key, index) in dic"> <span> <b>{{ index }} - 【{{ key }}】：{{ value }}</b> </span> </p> <!--复杂结构--> <!--name:O age:8--> <!--name:E age:58--> <!--name:H age:7--> <p v-for="person in pArr"> <span v-for="(v, k) in person" style="margin-right: 30px"> <b>{{ k }}</b> : <i>{{ v }}</i> </span> </p> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { list: ["语文", "数学", "英语", "编程", "吹牛逼"], dic: { name: 'B', age: 18, gender: 'male', }, pArr: [ { name: "O", age: "8", }, { name: "E", age: "58", }, { name: "H", age: "7", }, ] }, }); </script>
-
一个实现简易留言板的案例（todolist)
<style> span { background: green; padding: 5px; color: red; margin-right: 20px; border-radius: 50%; } </style> //样式 <div id="app"> <p> <input type="text" v-model="txt"> <button @click="addMsg">留言</button> </p> <ul> <!--<li><span>x</span>第二条</li>--> <!--<li>第一条</li>--> 要求留言以堆栈方式展现 <li v-for="(msg, index) in msgs"> <span @click="deleteMsg(index)">x</span> {{ msg }} </li> </ul> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { txt: '', msgs: [] }, methods: { addMsg: function () { var txt = this.txt; if (txt) { // unshift shift push pop // this.msgs.push(txt); this.msgs.unshift(txt); //实现消息的堆栈 this.txt = ''; } }, deleteMsg: function (index) { this.msgs.splice(index, 1) // 删除留言， 以index作为起始位置，切一个，不给任何值 } } }); </script>
-
事件指令和style属性结合使用
<div id="app"> <p :style="a"></p> <p @click="btnClick" :style="{ '200px', height: h, backgroundColor: 'red'}">变高</p> </div> // 根据点击事件切换不同的样式 <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { a: { '200px', height: '200px', // 'background-color': 'red' backgroundColor: 'red' }, h: '200px' }, methods: { btnClick: function () { this.h = '300px' } } }); </script>
-
事件指令与class属性的使用
实现不同的类样式的切换，class属性 {类名: 是否起作用} 字典内前面是类名，而字典的value值则是代表了是否该类起作用的判断条件
<style> .red { width: 200px; height: 200px; background: red; } .yellow { width: 100px; height: 100px; background: yellow; } .orange { width: 100px; height: 100px; background: orange; } .y { border-radius: 50%; } </style> <div id="app"> <button @click="redAction">变红</button> <button @click="yellowAction">变黄</button> <p :class="cname"></p> <!-- class: {}语法 => abc为类名, def为该类名的值,值可以为true|false, 代表abc是否起作用--> <!-- {类名: 是否起作用} --> <p :class="{abc: def}"></p> <button @click="orangeAction">切换</button> <p :class="{orange: is_orange}"></p> <!-- class: []语法 => 多类名 --> <p :class="[a, b, c]"></p> <!--整体语法--> <!-- x和z是变量: x值就是类名, z值决定类名y是否起作用 --> <p :class="[x, {y: z}]"></p> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { cname: '', def: false, is_orange: '', a: 'aaa', b: 'bbb', c: 'ccc', x: 'red', z: true }, methods: { redAction: function () { this.cname = 'red' }, yellowAction: function () { this.cname = 'yellow' }, orangeAction: function () { this.is_orange = !this.is_orange } } }); </script>