本次课程分为四个部分：
Vue基础——>本地应用——>网络应用——>综合应用
第一部分：Vue基础
Vue简介
1、JavaScript框架
2、简化Dom操作
3、响应式数据驱动
第一个Vue程序
-
导入开发版本的Vue.js.
-
创建Vue实例对象，设置el属性和data属性.
-
使用简洁的模板语法把数据渲染到页面上.
模版语法如下：
实例代码：
"en"> "UTF-8">Vue基础 "app" > {{message}}
el属性的意思是设置挂载点，通过css选择器设置Vue实例管理的元素
Vue实例的作用范围是什么呢？
- Vue会管理el选项命中的元素以及其 内部的后代元素
是否可以使用其他的选择器？
- 可以使用其他的选择器，但是建议使用ID选择器
是否可以设置其他的dom元素呢？
- 单标签不行，可以使用其他的双标签,但不包括使用HTML和BODY
代码如下
"en"> "UTF-8">el：挂载点 {{message}}"app" class="app"> {{message}} {{message}}
- data属性即数据对象，Vue实例需要使用的数据都会定义在data中。
- data中可以写复杂类型的数据
- *渲染复杂类型数据时，遵守js的语法即可（例如：对象的.语法，数组的索引语法）
对象如何获取属性，即对象.name
代码如下:
"en"> "UTF-8">data:数据对象 "app"> {{message}}{{school.name}} {{school.mobile}}
- {{campus[0]}}
- {{campus[3]}}
第二部分：本地应用。
用Vue开发网页效果。充分利用以下Vue指令,以案例巩固知识点。
"en"> "UTF-8">本地应用 "app">"message+'!'">深圳
"info+'!'">深圳
{{message+'!'}}深圳
效果如下：
总结：
- v-text指令的作用是：设置标签的内容（textContent)
- 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容。
全部代码：
"en"> "UTF-8">v-html "app">"content">
"content">
效果如下：
总结：
- v-html指令的作用是：设置元素的innerHTML
-
内容中有html结构会被解析为标签.
-
v-text指令无论内容是什么，只会解析为文本
- 解析文本使用v-text.需要解析html结构使用v-html
全部代码如下：
"en"> "UTF-8">v-on "app"> "button" value="v-on指令" v-on:click="doIt"> "button" value="v-on简写" @click="doIt"> "button" value="双击事件" @dblclick="doIt">"changeFood">{{food}}
总结：
- v-on指令的作用是：为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
计数器：
步骤：
1、data中定义数据：比如num
2、methods中添加两个方法：比如add(递增），sub（递减）
3、使用v-text将num设置给span标签
4、使用v-on将add，sub分别绑定给+，-按钮
5、累加的逻辑：小于10累加，否则提示
6、递减的逻辑：大于0递减，否则提示
所有代码：
"en">
"UTF-8">
计数器
"app">"imgSrc" alt="" >
"imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
"imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active: isActive}" @click="toggleActive">
总结：
- v-bind指令的作用是：为元素绑定属性
- 完整写法是v-bind：属性名
- 简写的话可以直接省略v-bind,只保留：属性名
- 列表数据使用数组保存
- v-bind指令可以设置元素属性，比如src
-
"app">
- for="item in arr"> 黑马程序员校区：{{item}}
- v-for指令的作用是：根据数据生成列表结构 - 数组经常和v-for结合使用 - 语法是（item，index）in 数据 （分别为每一项和索引） - item和index可以结合其他指令一起使用"en"> "UTF-8"> 
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数 - 定义方法时需要定义形参来接收传入的实参 - 事件的后面跟上，.修饰符可以对事件进行限制"en"> "UTF-8"> {{message}}
总结：
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 列表结构可以通过v-for指令结合数据生成
- v-on结合时间修饰符可以对事件进行限制，比如.enter
- v-on在绑定事件时可以传递自定义参数
- 通过v-model可以快速的设置和获取表单元素的值
"en">
"UTF-8">
axios基本使用
"button" value="get请求" class="get">
"button" value="post请求" class="post">
总结
- axios必须先导入才可以使用
- 使用get或post方法即可发送对应的请求（运用了get和post方法，与请求同名）
- then方法中的回调函数会在请求成功或失败时触发
"en">
"UTF-8">
"button" value="获取笑话" @click="getJoke">
{{joke}}
总结：
- axios回调函数中的this已经改变，无法访问到data中数据
- 把this保存起来,回调函数中直接使用保存的this即可(在上述代码中用到的是that ) 天气预报系统（与本地的区别在于增加网络数据获取的逻辑）
回车查询的截图： 回车查询总结：- 应用的逻辑代码建议和页面分离，使用单独的js文件编写。（然后在页面的部分进行导入）
- axios回调函数中this指向改变了，需要额外的保存一份。（即上述框起来的两个小部分）
- 服务器返回的数据比较复杂时，获取的时候需要注意层级结构。（层级结构结构可以在console中获取） 点击查询的截图 ： 点击查询总结：
- 自定义参数可以让代码的复用性更高，灵活度也提高。
- 服务器返回数据比较复杂时，获取的时候需要注意层级结构。
- 在vue中通过v-bind操纵属性
- audio标签的play事件会在音频播放的时候触发
- audio标签的pause事件会在音频暂停的时候触发
- 不同的接口需要的数据是不同的，文档的阅读需要仔细
- 页面结构复杂之后，通过审查元素的方式去快速定位相关元素
- 响应式的数据都应该在data中定义。
Original: https://www.cnblogs.com/zhouhuimin99/p/16394303.html
Author: 费皿啊
Title: Vue
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/603660/
转载文章受原作者版权保护。转载请注明原作者出处！