Vue进门
Vue入门
- Hello World
-
- 方法与双向绑定
- 创建组件
- Vue实例
- 生命周期图示
- 模板语法
- 指令
- 计算属性与方法
- 侦听器
- Class 与 Style 绑定
-
- 对象语法
- `内联定义是什么？`
- 绑定一个返回对象的计算属性
- 数组语法
- v-bind:style
- 用甘特图来看v-if
- 用UML图表来看v-for
- 流程图看表单
- 其他的内容还有：
Hello World
开发环境
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
生产环境
https://cdn.jsdelivr.net/npm/vue
vue-cli是什么？基于Node.js的构建工具是什么？
Vue.js的核心
采用模板语法，通过声明，将数据渲染进DOM
<html>
<head>
<title>test vuetitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
{
{ message }}
div>
<div id='app-2'>
<span v-bind:title="message">
鼠标放这儿
span>
div>
<div id="app-3">
<p v-if="seen">是否能看见我？p>
div>
<div id='app-4'>
<ol>
<li v-for="i in todos">
{
{ i.text}}
li>
ol>
div>
body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于' + new Date().toLocaleString()
}
})
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{
text: 'JavaScript' },
{
text: 'Vue' },
{
text: 'Program' }
]
}
})
script>
html>
方法与双向绑定
<html>
<head>
<title>test vuetitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app-5">
<p> {
{ message}}p>
<button v-on:click="reverseMessage">翻转消息button>
div>
<div id="app-6">
<p>{
{ message }}p>
<input v-model="message">
div>
body>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'hello'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
var app6 = new Vue({
el: '#app-6',
data: {
message: '你好'
}
})
script>
html>
vue官网1
创建组件
<html>
<head>
<title>test vuetitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
todo-item>
ol>
div>
body>
<script>
Vue.component('todo-item', {
props: ['todo'], //props类似于一个自定义attribute
template: '{
{ todo.text }} '
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{
id: 0, text: '蔬菜' },
{
id: 1, text: '水果' }
]
}
})
script>
html>
Vue实例
- 当一个Vue实例被创建，其data对象中所有的属性会被加载，当属性值改变时，视图将会产生响应。
- 半道添加的属性不会触发响应
- 使用Object.freeze(obj), 阻止修改现有的属性
- Vue的特殊属性使用 点 出 来 ， 如 v m . 点出来，如vm. 点出来，如vm.data, vm. e l , v m . el, vm. el,vm.watch
- 使用生命周期钩子操纵Vue对象创建过程
- 设置数据监听
- 编译模板
- 将实例挂载到DOM
- 在数据变化时更新DOM
生命周期钩子 - created: 在一个实例被创建之后执行
- mounted
- updated
- destroyed
箭头函数是什么东西2
生命周期图示
点这里
模板语法
v-once指令可以使数据改变时， 页面的值不更新
<span v-once>这个将不会改变: {
{ msg }}span>
双大括号把html当普通文本
v-html指令可以输出真正的html
XSS攻击是什么？
双括号中不能使用JavaScript语句
双括号中可以使用JavaScript表达式
不应在模板表达式中访问用户自定义的全局变量，因为其在沙盒中
10100 10100 10100 10100 10100 10100 10100 10100
指令
- 指令是带有v-前缀的特殊属性，
- 指令的职责是当表达式的值发生改变时，响应式地作用于DOM
- 指令可以接收参数，在指令名称之后用冒号表示
- 2.6之后可以用指令:[变量] 来指定动态参数
- 修饰符用一个点来指出指令应该以特殊的方式绑定
- v-bind的缩写为省略不写
- v-on的缩写为将v-on:写成@
计算属性与方法
计算属性
<html>
<head>
<title>test vuetitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="example">
<p>Original: {
{ message }}p>
<p>Computed: {
{ reverseMessage }}p>
div>
body>
<script>
var app = new Vue({
el: '#example',
data: {
message: 'hello',
},
computed: {
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
script>
html>
方法
<html>
<head>
<title>test vuetitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="example">
<p>Original: {
{ message }}p>
<p>Computed: {
{ reverseMessage() }}p>
div>
body>
<script>
var app = new Vue({
el: '#example',
data: {
message: '123',
},
methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
script>
html>
- 计算属性只有当响应式依赖发生变化时才会重新求值
- 方法是每次都会重新求值
- 也就是说计算属性会优先使用缓存而方法不使用
- 方法是每次都会重新求值
AngularJS是什么？
- 计算属性默认只有getter
- 可以给计算属性设置一个setter
<html>
<head>
<title>test vuetitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="demo">
<p> {
{ fullName }} p>
<input v-model="fullName">
div>
<div id="app-6">
<p>{
{ message }}p>
<input v-model="message">
div>
body>
<script>
var app = new Vue({
el: '#demo',
data: {
firstName: 'Vue',
lastName: 'Js'
},
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})
var app6 = new Vue({
el: '#app-6',
data: {
message: '你好'
}
})
script>
html>
为什么两种效果不一样？
侦听器
一个简单的表格是这么创建的：
| 属性 | 解释 |
|---|---|
| 侦听器 | 使用watch在数据变化时执行异步或开销较大的操作 |
<html>
<head>
<title>test vuetitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js">script>
head>
<body>
<div id="watch-example">
<p>
Ask a question:
<input v-model="question">
p>
<p>{
{ answer }}p>
div>
body>
<script>
// 根据question状态的变化在answer部分打印不同的语句
// 1. 初始化说明
// 2. 监测：当question变化时，显示正在输入中
// 3. 限制，当输入完成以后，调用获取answer的接口
// 4. question中找不到问号则提示
// 5. question中有问号则调用一次接口，并赋值answer
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
created: function () {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
// 请参考：https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
//{"answer":"yes","forced":false,"image":"https://yesno.wtf/assets/yes/2-5df1b403f2654fa77559af1bf2332d7a.gif"}
// vm.answer = _.capitalize(response.data.answer)
vm.answer = _.capitalize(response.data.answer + ',' + response.data.image)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
}
}
})
script>
html>
-
ok
- bok ok bok?
- ok
- bok
Class 与 Style 绑定
对象语法
- 传给v-bind:class 一个对象，以动态地切换 class
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
>div>
<script>
data: {
isActive: true,
hasError: false
}script>
<div class="static active">div>
内联定义是什么？
可能就是那种 等于号 的定义
绑定的数据对象不必内联定义在模板里，即可以不定义
<div v-bind:class="classObject">div>
<script>
data: {
classObject: {
active: true,
'text-danger': false
}
}
script>
详情链接
绑定一个返回对象的计算属性
就是某个属性怎么样是计算得来的
<div v-bind:class="classObject">div>
<script>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
script>
数组语法
当在自定义组件上添加class属性时，这个属性会被添加到该组件的根元素上，且已经存在的class不会被覆盖
v-bind:style
就是给标签赋予某种样式
<div v-bind:style="{
color: activeColor, fontSize: fontSize + 'px' }">div>
<script>
data: {
activeColor: 'red',
fontSize: 30
}
script>
<div v-bind:style="styleObject">div>
<script>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
script>
<div v-bind:style="[baseStyles, overridingStyles]">div>
有点理解不了了，像看：
Γ O ∈ ∀ Γ O ∈ ∀ Γ O ∈ ∀ Γ O ∈ ∀ Γ O ∈ ∀ \Gamma \mathbb O \in \forall \Gamma \mathbb O \in \forall \Gamma \mathbb O \in \forall \Gamma \mathbb O \in \forall \Gamma \mathbb O \in \forall ΓO∈∀ΓO∈∀ΓO∈∀ΓO∈∀ΓO∈∀
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.
一样
用甘特图来看v-if
Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务
Vue is awesome!
算了，这个甘特图看起来没什么意思，不看了
- v-if 是一个指令， 必须将它添加到一个元素上
- v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
- 给元素添加key可以避免元素在if-else两个分支被复用
- v-show 不支持 元素，也不支持 v-else
- 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display
用UML图表来看v-for
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：
张三 李四 王五 v-for 还支持一个可选的第二个参数，即当前项的索引 可以用 of 替代 in 作为分隔符 v-for对象，对象是字典 可以这样:
不推荐在同一元素上使用 v-if 和 v-for.. 同一个元素上，v-for的优先级比v-if高 张三 李四 王五
这将产生一个流程图。:
prop
迭代数据
组件
事件处理
v-on:click
事件修饰符
流程图看表单
flowchart的流程图：
Created with Raphaël 2.2.0 开始 v-model 双向数据绑定 确认？ 结束 yes no
其他的内容还有：
-
组件注册
-
Prop
-
自定义事件
-
插槽
-
动态组件&异步组件
-
处理边界情况
-
过渡&动画
-
可复用性&组合
- 混入
- 自定义指令
- 渲染函数 & JSX
- 插件
- 过滤器
-
规模化
- 路由
- 状态管理
- 安全
太多了，还是去官网看吧
Vue介绍 ↩︎
箭头函数 ↩︎