第 1 章： Vue 核心

最新推荐文章于 2023-03-21 18:51:09 发布

yyx-Gary

最新推荐文章于 2023-03-21 18:51:09 发布

阅读量525

点赞数

分类专栏： VUE 文章标签： vue node.js

本文链接：https://blog.csdn.net/yuan_si_yu/article/details/113970214

版权

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.1. Vue的基本认识

1.1.1. 官网

英文官网:https://vuejs.org/
中文官网:https://cn.vuejs.org/

1.1.2. 介绍描述

渐进式 JavaScript 框架
作者: 尤雨溪(一位华裔前 Google 工程师)
作用: 动态构建用户界面

1.1.3. Vue 的特点

遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

1.1.4. 与其它前端 JS 框架的关联

借鉴 angular 的模板和数据绑定技术
借鉴 react 的组件化和虚拟 DOM 技术

1.1.5. Vue 扩展插件

vue-cli: vue 脚手架
vue-resource(axios): ajax 请求
vue-router: 路由
vuex: 状态管理
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
mint-ui: 基于 vue 的 UI 组件库(移动端)
element-ui: 基于 vue 的 UI 组件库(PC 端)

1.2. Vue的基本使用

1.2.1. 效果(01_HelloWorld/test.html)

01_helloworld.gif

1.2.2. 编码

<div id="app">
  <input type="text" v-model="username">
  <p>Hello, {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      username: 'atguigu'
    }
  })
</script>

1.2.3. 使用 vue 开发者工具调试

Vue.js devtools_3.1.2_0.crx

1.2.4. 理解 Vue 的 MVVM

1.3.模板语法

1.3.1. 效果(02_模板语法/test.html)

02_模板语法.gif

1.3.2. 模板的理解

动态的 html 页面
包含了一些 JS 语法代码

a. 双大括号表达式

b. 指令(以 v-开头的自定义标签属性)

1.3.3. 双大括号表达式

语法: {{exp}}
功能: 向页面输出数据
可以调用对象的方法

1.3.4. 指令一: 强制数据绑定

功能: 指定变化的属性值
完整写法: v-bind:xxx=‘yyy’ //yyy 会作为表达式解析执行
简洁写法: :xxx=‘yyy’

1.3.5. 指令二: 绑定事件监听

功能: 绑定指定事件名的回调函数
完整写法:

v-on:keyup='xxx'
v-on:keyup='xxx(参数)'
v-on:keyup.enter='xxx'

简洁写法:

@keyup='xxx'
@keyup.enter='xxx'

1.3.6. 编码

<div id="app">
  <h2>1. 双大括号表达式</h2>
  <p>{{msg}}</p>
  <p>{{msg.toUpperCase()}}</p>
  <h2>2. 指令一: 强制数据绑定</h2>
  <a href="url">访问指定站点</a><br><!--不能使用-->
  <a v-bind:href="url">访问指定站点 2</a><br>
  <a :href="url">访问指定站点 3</a><br>
  <h2>3. 指令二: 绑定事件监听</h2>
  <button v-on:click="handleClick">点我</button>
  <button @click="handleClick">点我 2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
  el: '#app',
  data: {// data 的所有属性都会成功 vm 对象的属性, 而模板页面中可以直接访问
    msg: 'NBA I Love This Game!',
    url: 'http://www.baidu.com'
  },
  methods: {
    handleClick () {
      alert('处理点击')
    }
  }
})
</script>

1.4.计算属性和监视

1.4.1. 效果(03_计算属性和监视/test.html)

03_计算属性和监视.gif

1.4.2. 计算属性

在 computed 属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果

1.4.3. 监视属性

通过 vm 对象的 $watch() 或 watch 配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算

1.4.4. 计算属性高级

通过 getter/setter 实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次 getter 计算

1.4.5. 编码

<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  姓名 1(单向): <input type="text" placeholder="Full Name" v-model="fullName1"><br>
  姓名 2(单向): <input type="text" placeholder="Full Name" v-model="fullName2"><br>
  姓名 3(双向): <input type="text" placeholder="Full Name2" v-model="fullName3"><br>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Kobe',
    lastName: 'bryant',
    fullName2: 'Kobe bryant'
  },
  computed: {
    fullName: function () {
      return this.firstName + " " + this.lastName
    },
    fullName3: {
      get: function () {
        return this.firstName + " " + this.lastName
      },
      set: function (value) {
        var names = value.split(' ')
        this.firstName = names[0]
        this.lastName = names[1]
      }
    }
  },
  watch: {
    lastName: function (newVal, oldVal) {
      this.fullName2 = this.firstName + ' ' + newVal
    }
  }
})
vm.$watch('firstName', function (val) {
  this.fullName2 = val + ' ' + this.lastName
})

1.5. class与style绑定

1.5.1. 效果 (04_class 与 style 绑定/test.html)

04_class与style绑定.gif

1.5.2. 理解

在应用界面中, 某个(些)元素的样式是变化的
class/style 绑定就是专门用来实现动态样式效果的技术

1.5.3. class 绑定

:class=‘xxx’
表达式是字符串: ‘classA’
表达式是对象: {classA:isA, classB: isB}
表达式是数组: [‘classA’, ‘classB’]

1.5.4. style 绑定

:style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
其中 activeColor/fontSize 是 data 属性

1.5.5. 编码

<style>
.classA {
  color: red;
}
.classB {
  background: blue;
} 
.classC {
  font-size: 20px;
}
</style>
<div id="demo">
<h2>1. class 绑定: :class='xxx'</h2>
<p class="classB" :class="a">表达式是字符串: 'classA'</p>
<p :class="{classA: isA, classB: isB}">表达式是对象: {classA:isA, classB: isB}</p>
<p :class="['classA', 'classC']"> 表达式是数组: ['classA', 'classB']</p>
<h2>2. style 绑定</h2>
<p :style="{color, fontSize}">style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>
<button @click="update">更新</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
  el : '#demo',
  data : {
    a: 'classA',
    isA: true,
    isB: false,
    color: 'red',
    fontSize: '20px'
  },
  methods : {
    update () {
      this.a = 'classC'
      this.isA = false
      this.isB = true
      this.color = 'blue'
      this.fontSize = '30px'
  }
  }
})
</script>

1.6.条件渲染

1.6.1. 效果 (05_条件渲染/test.html)

05_条件渲染.gif

1.6.2. 条件渲染指令

v-if 与 v-else
v-show

1.6.3. 比较 v-if 与 v-show

如果需要频繁切换 v-show 较好
当条件不成立时, v-if 的所有子节点不会解析(项目中使用)

1.6.4. 编码

<div id="demo">
<h2 v-if="ok">表白成功</h2>
<h2 v-else>表白失败</h2>
<h2 v-show="ok">求婚成功</h2>
<h2 v-show="!ok">求婚失败</h2>
<br>
<button @click="ok=!ok">切换</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#demo',
data: {
ok: false
}
})
</script>

1.7.列表渲染

1.7.1. 效果 (06_列表渲染/test.html)

06_列表渲染.gif 06_列表的过滤和排序.gif

列表显示指令

数组: v-for / index

对象: v-for / key

列表的更新显示

删除 item

替换 item

列表的高级处理

列表过滤

列表排序

1.7.2. 编码 1

<div id="demo">
<h2>测试: v-for 遍历数组</h2>
<ul>
<li v-for="(p, index) in persons" :key="index">
{{index}}--{{p.name}}--{{p.age}}
--
<button @click="deleteItem(index)">删除</button>
--
<button @click="updateItem(index, {name:'Jok',age:15})">更新</button>
</li>
</ul>
<h2>测试: v-for 遍历对象</h2>
<ul>
<li v-for="(value, key) in persons[0]">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
persons: [
{id: 1, name: 'Tom', age: 13},
{id: 2, name: 'Jack', age: 12},
{id: 3, name: 'Bob', age: 14}
]
},
methods: {
deleteItem(index) {
this.persons.splice(index, 1)
},
updateItem(index, p) {
// this.persons[index] = p // 页面不会更新
this.persons.splice(index, 1, p)
}
}
})
</script>

1.7.3. 编码 2

<div id="demo">
<input type="text" name="searchName" placeholder="搜索指定用户名"
v-model="searchName">
<ul>
<li v-for="(p, index) in filterPerson" :key="index">
{{index}}--{{p.name}}--{{p.age}}
</li>
</ul>
<button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原本顺序</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
orderType: 0, //0 代表不排序, 1 为升序, 2 为降序
searchName: '',
persons: [
{id: 1, name: 'Tom', age: 13},
{id: 2, name: 'Jack', age: 12},
{id: 3, name: 'Bob', age: 17},
{id: 4, name: 'Cat', age: 14},
{id: 4, name: 'Mike', age: 14},
{id: 4, name: 'Monica', age: 16}
]
},
methods: {
setOrderType (orderType) {
this.orderType = orderType
}
},
computed: {
filterPerson() {
let {orderType, searchName, persons} = this
// 过滤
persons = persons.filter(p => p.name.indexOf(searchName)!=-1)
// 排序
if(orderType!==0) {
persons = persons.sort(function (p1, p2) {
if(orderType===1) {
return p1.age-p2.age
} else {
return p2.age-p1.age
}
})
} r
eturn persons
}
}
})
</script>

1.8.事件处理

1.8.1. 效果 (07_事件处理/test.html)

07_事件处理.gif

1.8.2. 绑定监听:

v-on:xxx=“fun”
@xxx=“fun”
@xxx=“fun(参数)”
默认事件形参: event
隐含属性对象: $event

1.8.3. 事件修饰符

.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()

1.8.4. 按键修饰符

.keycode : 操作的是某个 keycode 值的键
.keyName : 操作的某个按键名的键(少部分)

1.8.5. 编码

<div id="example">
<h2>1. 绑定监听</h2>
<button v-on:click="test1">Greet</button>
<button @click="test1">Greet2</button>
<button @click="test2($event, 'hello')">Greet3</button>
<h2>2. 事件修饰符</h2>
<!-- 阻止事件默认行为 -->
<a href="http://www.baidu.com" @click.prevent="test3">百度一下</a>
<br/>
<br/>
<!-- 停止事件冒泡 -->
<div style="width: 200px;height: 200px;background: red" @click="test4">
<div style="width: 100px;height: 100px;background: green"
@click.stop="test5"></div>
</div>
<h2>3. 按键修饰符</h2>
<input @keyup.8="test6">
<input @keyup.enter="test6">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
methods: {
test1 (event) {
// 方法内 `this` 指向 vm
// alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.innerHTML)
},
test2 (event, msg) {
alert(event.target.innerHTML + '---' + msg)
},
test3() {
alert('阻止事件的默认行为')
},
test4() {
alert('out')
},
test5() {
alert('inner')
},
test6(event) {
alert(event.keyCode + '---' + event.target.value)
}
}
})
</script>

1.9.表单输入绑定

1.9.1. 效果 (08_表单输入绑定/test.html)

08_表单输入绑定.gif

1.9.2. 使用 v-model 对表单数据自动收集

text/textarea
checkbox
radio
select

1.9.3. 编码

<div id="demo">
<form @submit.prevent="handleSubmit">
<span>用户名: </span>
<input type="text" v-model="user.username"><br>
<span>密码: </span>
<input type="password" v-model="user.pwd"><br>
<span>性别: </span>
<input type="radio" id="female" value="female" v-model="user.sex">
<label for="female">女</label>
<input type="radio" id="male" value="male" v-model="user.sex">
<label for="male">男</label><br>
<span>爱好: </span>
<input type="checkbox" id="basket" value="basketball"
v-model="user.likes">
<label for="basket">篮球</label>
<input type="checkbox" id="foot" value="football"
v-model="user.likes">
<label for="foot">足球</label>
<input type="checkbox" id="pingpang" value="pingpang"
v-model="user.likes">
<label for="pingpang">乒乓</label><br>
<span>城市: </span>
<select v-model="user.cityId">
<option value="">未选择</option>
<option v-for="city in allCitys" :value="city.id">
{{ city.name }}
</option>
</select><br>
<span>介绍: </span>
<textarea v-model="user.desc" rows="10"></textarea><br><br>
<input type="submit" value="注册">
</form>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#demo',
data: {
user: {
username: '',
pwd: '',
sex: 'female',
likes: [],
cityId: '',
desc: '',
},
allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SZ'},{id: 4, name:
'SH'}],
},
methods: {
handleSubmit (event) {
alert(JSON.stringify(this.user))
}
}
})
</script>

1.10. Vue实例生命周期

1.10.1. 效果 (09_Vue 实例_生命周期/test.html)

09_Vue实例_生命周期.gif

1.10.2. 生命周期流程图

1.10.3. vue 生命周期分析

初始化显示

beforeCreate()
created()
beforeMount()
mounted()

更新状态: this.xxx = value

beforeUpdate()
updated()

销毁 vue 实例: vm.$destory()

beforeDestory()
destoryed()

1.10.4. 常用的生命周期方法

created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器

1.10.5. 编码

<div>
<button @click="destoryVue">destory vue</button>
<p v-show="isShowing">{{msg}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vue = new Vue({
el: 'div',
data: {
msg: '尚硅谷 IT 教育',
isShowing: true,
persons: []
},
beforeCreate () {
console.log('beforeCreate() msg=' + this.msg)
},
created () {
console.log('created() msg='+this.msg)
this.intervalId = setInterval(() => {
console.log('-----')
this.isShowing = !this.isShowing
}, 1000)
},
beforeMount () {
console.log('beforeMount() msg='+this.msg)
},
mounted () {
console.log('mounted() msg='+this.msg)
},
beforeUpdate() {
console.log('beforeUpdate isShowing='+this.isShowing)
},
updated () {
console.log('updated isShowing='+this.isShowing)
},
beforeDestroy () {
console.log('beforeDestroy() msg='+this.msg)
clearInterval(this.intervalId)
},
destroyed () {
console.log('destroyed() msg='+this.msg)
},
methods: {
destoryVue () {
vue.$destroy()
}
}
})
</script>

1.11.过渡&动画

1.11.1. 效果 (10_过渡&动画/test.html)

10_过渡&动画1.gif

10_过渡&动画2.gif

1.11.2. vue 动画的理解

操作 css 的 trasition 或 animation
vue 会给目标元素添加/移除特定的 class
过渡的相关类名

xxx-enter-active: 指定显示的 transition

xxx-leave-active: 指定隐藏的 transition

xxx-enter/xxx-leave-to: 指定隐藏时的样式

1.11.3. 基本过渡动画的编码

在目标元素外包裹
定义 class 样式

指定过渡样式: transition

指定隐藏时的样式: opacity/其它

1.11.4. 编码 1

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
} .
fade-enter, .fade-leave-to {
opacity: 0
} /
* 可以设置不同的进入和离开动画 */
.slide-fade-enter-active {
transition: all .3s ease;
} .
slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
} .
slide-fade-enter, .slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>
<div id="demo1">
<button @click="show = !show">
Toggle1
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<div id="demo2">
<button @click="show = !show">
Toggle2
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo1',
data: {
show: true
}
})
new Vue({
el: '#demo2',
data: {
show: true
}
})
</script>

1.11.5. 编码 2

<style>
.bounce-enter-active {
animation: bounce-in .5s;
} .
bounce-leave-active {
animation: bounce-in .5s reverse;
} @
keyframes bounce-in {
0% {
transform: scale(0);
} 5
0% {
transform: scale(1.5);
} 1
00% {
transform: scale(1);
}
}
</style>
<div id="test2">
<button @click="show = !show">Toggle show</button>
<br>
<transition name="bounce">
<p v-if="show" style="display: inline-block">Look at me!</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: '#test2',
data: {
show: true
}
})
</script>

1.12.过滤器

1.12.1. 效果 (11_过滤器/test.html)

1.12.2. 理解过滤器

功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 可是产生新的对应的数据

1.12.3. 定义和使用过滤器

定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,…]){

// 进行一定的数据处理

return newValue

})

使用过滤器

1.12.4. 编码

<div id="test">
<p>当前时间为: {{currentTime}}</p>
<p>当前时间 1 为: {{currentTime | dateStr}}</p>
<p>当前时间 2 为: {{currentTime | dateStr('YYYY-MM-DD')}}</p>
<p>当前时间 3 为: {{currentTime | dateStr('HH:mm:ss')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript"
src="https://cdn.bootcss.com/moment.js/2.19.0/moment.js"></script>
<script>
// 注册过滤器
Vue.filter('dateStr', function (value, format) {
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
})
new Vue({
el: '#test',
data: {
currentTime: new Date()
}
})
</script>

1.13.内置指令与自定义指令

1.13.1. 效果 (12_指令/test.html)

12_指令_内置指令.gif

1.13.2. 常用内置指令

v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为 true, 当前标签才会输出到页面
v-else: 如果为 false, 当前标签才会输出到页面
v-show : 通过控制 display 样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略 v-bind
v-model : 双向数据绑定
ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

1.13.3. 自定义指令

注册全局指令

Vue.directive(‘my-directive’, function(el, binding){

el.innerHTML = binding.value.toupperCase()

})

注册局部指令

directives : {

‘my-directive’ : {

bind (el, binding) {

el.innerHTML = binding.value.toupperCase()

}

使用指令

v-my-directive=‘xxx’

1.13.4. 编码 1(内置指令)

<style>
[v-cloak] {
display: none
}
</style>
<div id="example">
<p v-text="url"></p>
<p v-html="url"></p>
<img :id="myid" :src="imageSrc">
<p>
<span ref="message">atguigu.com</span>
<button @click="showMsg">显示左侧文本</button>
</p>
<p v-cloak>{{url}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
alert('模拟加载慢')
new Vue({
el: '#example',
data: {
url: '<a href="http://www.atguigu.com">尚硅谷</a>',
myid: 'abc123',
imageSrc: 'http://cn.vuejs.org/images/logo.png'
},
methods: {
showMsg: function () {
alert(this.$refs.message.textContent)
}
}
})
</script>

1.13.5. 编码 2(自定义指令)

需求: 自定义 2 个指令

功能类型于 v-text, 但转换为全大写
功能类型于 v-text, 但转换为全小写

<div id="demo1">
<p v-upper-text="msg"></p>
<p v-lower-text="msg"></p>
</div>
<div id="demo2">
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p> <!--局部指令, 此处不能使用-->
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//注册全局指令
Vue.directive('upper-text', function (el, binding) {
el.innerHTML = binding.value.toUpperCase()
})
new Vue({
el: '#demo1',
data: {
msg: 'NBA love this game!'
},
directives: { // 注册局部指令
'lower-text': {
bind (el, binding) {
el.innerHTML = binding.value.toLowerCase()
}
}
}
})
new Vue({
el: '#demo2',
data: {
msg2: 'I Like You'
}
})
</script>

1.14.自定义插件

1.14.1. 效果 (13_插件/test.html)

13_插件.gif

1.14.2. 说明

Vue 插件是一个包含 install 方法的对象
通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

1.14.3. 编码

1) 插件 JS
/**
* 自定义 Vue 插件
*/
(function () {
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
alert('Vue 函数对象方法执行')
} //
2. 添加全局资源
Vue.directive('my-directive', function (el, binding) {
el.innerHTML = "MyPlugin my-directive " + binding.value
})
// 3. 添加实例方法
Vue.prototype.$myMethod = function () {
alert('vue 实例对象方法执行')
}
}
window.MyPlugin = MyPlugin
})()
2) 页面使用插件
<div id="demo">
<!--使用自定义指令-->
<p v-my-directive="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<script type="text/javascript">
//使用自定义插件
Vue.use(MyPlugin)
var vm = new Vue({
el: '#demo',
data: {
msg: 'atguigu'
}
})
//调用自定义的静态方法
Vue.myGlobalMethod()
//调用自定义的对象方法
vm.$myMethod()
</script>

yyx-Gary

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
第 1 章： Vue 核心

第 1 章： Vue 核心1.1. Vue的基本认识1.1.1. 官网英文官网:https://vuejs.org/中文官网:https://cn.vuejs.org/1.1.2. 介绍描述渐进式 JavaScript 框架作者: 尤雨溪(一位华裔前 Google 工程师)作用: 动态构建用户界面1.1.3. Vue 的特点遵循 MVVM 模式编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发它本身只关注 UI, 可以轻松引入 vue
复制链接

扫一扫