Vue
2020-06-16 10:00:23 39 举报AI智能生成
Vue框架
作者其他创作
大纲/内容
实例和模板语法
实例
生命周期
创建一个vue对象会经过一系列初始化过程，我们可以在生命周期的各个阶段加入我们想要执行的代码
模板语法
插值
文本
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定
<span v-once>这个将不会改变: {{ msg }}</span>
原始HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html
例子
使用JavaScript
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
指令
<p v-if="seen">现在你看到我了</p>//（这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。）
<a v-bind:href="url">...</a>//在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
<a v-on:click="doSomething">...</a>//它用于监听 DOM 事件：
缩写
内置指令
基本指令
v-cloak
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码
例子
v-once
使用v-once的标签在Vue对象数据发生改变时不会随其改变而改变
例子
v-text
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
v-html
v-bind
作用
用来绑定标签上的属性值和样式
缩写
:
v-on
作用
监听事件，后可接函数名或js表达式
简写
@
阻止冒泡行为
条件渲染
v-if,v-else-if,v-else
v-show
与v-if区别
v-show没有销毁dom只是隐藏（display=false），v-if销毁了
例子
列表渲染
v-for
数组更新检测
变更方法
以下方法对数组的调用都将引起视图的改变
方法
push()
pop()
shift()
移除第一项
unshift()
在数组前端添加任意项
arrayObject.unshift(newelement1,newelement2,....,newelementX)
splice()
参数
arrayObject.splice(index,howmany,item1,.....,itemX)
参数
index
必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany
必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX
可选。向数组添加的新项目。
sort()
reverse()
替换数组
不会改变原来数组的值，会返回一个新的数组
方法
concat()
先创建一个数组副本，然后将接收到的参数加载副本后面
slice()
有两个参数，开始和结束，从开始到结束位置截取一个新的数组出来
map()
Array.map(fucntion(){})
对 被调用的数组元素执行指定的函数，返回一个新的数组
filter()
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
事件处理
监听事件
使用v-on
v-on:+事件类型 = 执行方法
事件处理方法
事件修饰符
stop
本图内部指令中基本指令有例子
capture
事件捕获
即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。
就是谁有该事件修饰符，就先触发谁。
self
self修饰符会跳过冒泡事件和事件监听
once
被修饰的v-on:click.once 将只被执行一次
prevent
阻止页面的跳转如a标签
按键修饰符
按键事件
keydown
按下
keyup
抬起
keypress
按下和抬起之间
修饰符
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
例子（可用在v-on上）
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.enter="submit">
系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器
.ctrl
.alt
.shift
.meta
组件技术
组件基础
定义
是一个自定义的功能强大的HTML元素，Vue对该标签的注册可以对其进行监听
是可复用的Vue实例，他可以接受除el外和new Vue相同的选项（data，methods，watch，computed）
格式
template
html
script
js
style
样式
组件的注册
全局
Vue.component
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
局部
挂在一个Vue实例上除了该实例之前其他地方无法使用
通过 Prop 向子组件传递数据
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。(设置自定义元素的属性)
问题
组将中data项为什么只能是个函数？
原因：Vue组件是一个可复用的实例，data设计成一个函数是因为每次使用该实例时每个实例都有自己独有的data作用域，实例之间相互隔离。
组件的数据通信
监听子组件事件
$emit()
组件值传递
父传递给子
通过v-bind方式接受父组件的值
子传递给父
$emit()
点击子组件触发父类方法
插槽
匿名插槽
具名插槽
作用域插槽
数据请求/路由/Vuex状态管理
数据请求
vue-resource
get
post
Axios
引入
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
npm install axios
路由
Vuex状态管理
概念
前端技术的发展介绍
介绍
1.html/Xhtml/Xml CSS JS
2.Jquery,Bootstrap,LayUI,Zepto,Prototype
3.模块化组件 ES6 Module , AMD-RequireJS等
4.前端三大框架 AngularJS,React,Vue
5.nodejs,npm,webpack前端工程化工具
设计思想的转变
Model与ViewModel使用了观察者模式，当数据发生改变时会触发观察者的update方法
前端技术栈
Vue特点
Vue是什么
Vue的特点
易用
灵活
高效
响应式编程
组件化
核心
1.响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom操作，而专心数据操作
2.可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试
开发特点
低耦合
重用性
HTML模块化
数据自动处理
双向绑定
Vue的简单使用
安装Vue的方法
<script> 引入
NPM安装
命令行工具
https://cn.vuejs.org/v2/guide/index.html
引入本地vue.js
使用
计算属性和监听器
计算属性
产生
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
语法
例子
example
相比方法的优势
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
监听器
监听数据（将数据与函数进行绑定）
vm.$watch(数据 ， function(){})
new Vue({watch : { data1: function(){} }})
例子
过滤器
定义
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
使用
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： {{ msg | msgFormat(msg)}} ，<div v-bind:id="rawId | formatId"></div>
例子
页面元素样式的绑定
style样绑定
数组形式绑定
对象形式绑定
表单输入绑定
双向绑定
数据双向绑定就是视图的数据变化会引起Vue中数据的变化，Vue中数据的变化也会反映到视图上去
v-model(可实现数据的双向绑定)
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
文本
多行文本
复选框
单选框
子主题
选择框
值绑定
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：
修饰符
.lazy
当添加.lazy修饰符之后，改变input框中的内容并不会使得span中的内容发生变化，此时当输入框失去焦点后触发change事件.控制台中输出相应内容。
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
前端工程化
0 条评论
下一页
