一.基本语法
1. {{}}: 插值表达式
插值表达式的作用?
通常用来获取Vue实例中定义的数据(data)。
属性节点中 不能够使用插值表达式。
2. el: 挂载点
2.1. el的作用 ?
定义 Vue实例挂载的元素节点,表示vue接管该区域
2.2. Vue的作用范围是什么 ?
Vue会管理el选项命中的元素,及其内部元素
2.3. el选择挂载点时,是否可以使用其他选择器 ?
可以,但是建议使用 ID选择器
2.3. 是否可以设置其他的DOM元素进行关联 ?
可以但是建议选择DIV, 不能使用HTML和Body标签
2.4.是否可以设置其他的DOM元素进行关联 ?
可以但是建议选择DIV, 不能使用HTML和Body标签
3. data: 数据对象
3.1. Vue中用到的数据定义在data中
3.2. data中可以写复杂类型
3.3. 渲染复杂类型数据的时候,遵守js语法
4.常用指令
4.1. v-text 指令
作用: 获取data数据, 设置标签的内容.
注意: 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容.
4.2. v-html 指令
作用: 设置元素的 innerHTML (可以向元素中写入新的标签)
4.3. v-on 指令
作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click="方法"
绑定的方法定义在 VUE实例的, method属性中.
v-on 指令补充
4.3.1. 传递自定义参数 : 函数调用传参
4.3.2. 事件修饰符: 对事件触发的方式进行限制
| <body> <div id="app"> <!-- 函数传参--> <input type="button" value="礼物刷起来" @click="showTime(666,'爱你老铁!')" /> <!-- 事件修饰符指定哪些方式可以触发事件--> <input type="text" @keyup.enter="hi" /> </div> </body> <script src="./js/vue.min.js"></script> <script> var VM = new Vue({ el: "#app", data: {}, methods: { showTime: function (p1, p2) { console.log(p1); console.log(p2); }, hi: function () { alert("你好吗?"); }, }, }); </script> |
4.4.. v-show指令
作用: v-show指令, 根据真假值,切换元素的显示状态
4.5. v-if 指令
作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )
4.6. v-bind 指令
| 语法格式: v-bind:属性名=表达式 <img v-bind:src="imgSrc"> var VM = new Vue({ el:"#app", data:{ imgSrc:"图片地址" } }) v-bind 可以省略，简写为冒号 ： <img :src="imgSrc">
|
v-bind指令总结
v-bind 指令的作用是： 为元素绑定属性 完整写法
v-bind:属性名，可以简写为 :属性名
4.7. v-for 指令
作用: 根据数据生成列表结构
语法结构
| <div id="app"> <ul> <li v-for="item in arr"></li> 代码示例 </ul> </div> var VM = new Vue({ el:"#app", data:{ arr:[1,2,3,4,5], objArr:[ {name:"tom"}, {name:"jack"} ] } }) |
v-for指令总结
v-for 指令的作用: 根据数据生成列表结构
数组经常和 v-for结合使用,数组有两个常用方法:
push() 向数组末尾添加一个或多个元素
shift() 把数组中的第一个元素删除
语法是: (item,index) in 数据
item和index 可以结合其他指令一起使用
数组的长度变化,会同步更新到页面上,是响应式的
二.axios总结
1. axios 必须导包才能使用
2. 使用get或者post方法,就可以发送请求
3. then方法中的回调函数,会在请求成功或者请求失败的时候触发
4. 通过回调函数的形参可以获取响应的内容,或者错误信息
三.computed计算属性
computed 的作用: 减少运算次数, 缓存运算结果. 运用于重复相同的计算.
总结:
1. 定义函数也可以实现与 计算属性相同的效果,都可以简化运算。
2. 不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
四.解决页面闪烁问题
使用插值表达式的地方出现了闪烁问题,如何解决呢?
v-cloak指令
作用: 解决插值表达式闪烁问题
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我
们可以使用 v-cloak 指令来解决这一问题。
1.添加样式解决如下:
| <style> /* 通过属性选择器,设置添加了v-cloak */ [v-cloak] { display: none; } </style>
|
2. 在id为app的div中添加 v-cloak
| <div class="wrap" id="app" v-cloak> |
五.过滤器(filter)
过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原
来的数据，只是在原数据的基础上产生新的数据。
数据加工车间,对值进行筛选加工.
六.侦听器(watch)
Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。
作用: 当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性
七. Component 组件
组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。
我们将相同的功能进行抽取,封装为组件,这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。
注意:
1. 组件名以小写开头，采用短横线分割命名: 例如 hello-Word
2. 组件中的data 必须是一个函数,注意与Vue实例中的data区分
3. 在template模板中, 只能有一个根元素
4.创建局部组件，注意 components，注意末尾有 ‘s’，而全局组件是不用+ ‘s’ 的。这意味着，components 里可以创建多个组件。
八. Vue Router 路由
什么是路由?
在Web开发中，路由是指根据URL分配到对应的处理程序。 路由允许我们通过不同的 URL 访问不同的 内容。
什么是SPA ?
单页应用不存在页面跳转，它本身只有一个HTML页面。我们传统意义上的页面跳转在单页应用的概 念下转变为了 body 内某些元素的替换和更新。
单页面应用的好处:
1. 用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
2. 适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲 染。
路由总结:
1. router是Vue中的路由管理器对象,用来管理路由.
2. route是路由对象,一个路由就对应了一条访问路径,一组路由用routes表示
3. 每个路由对象都有两部分 path(路径)和component (组件) 4. router-link 是对a标签的封装,通过to属性指定连接 5. router-view 路由访问到指定组件后,进行页面展示
2752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
