vue基础
介绍
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
安装
直接用 <script> 引入
直接下载并用 <script>
标签引入,Vue
会被注册为一个全局变量。
下载 开发版本 包含完整的警告和调试模式
下载 生产版本 删除了警告,33.46KB min+gzip
也可以使用CDN远程文件:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
使用npm安装
# 最新稳定版 $ npm install vue
使用命令行工具(CLI)
Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。
# 全局安装 vue-cli npm install --global vue-cli # 检测vue-cli是否安装正确 vue --version # 运行命令来创建一个myapp的新项目 vue create myapp
Vue实例
每个 Vue 应用都是通过用 Vue
函数创建一个新的 Vue 实例开始的:
var vm = new Vue({ // 选项 })
可以在实例中添加数据:
var vm = new Vue({ data: { } })
在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。
<div id="app"> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { string: "hello world" } }) </script>
数据渲染
声明式渲染
使用两对花括号进行数据渲染 { { }}
<div id="app"> { {message}} </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { message: "hello world" } }) </script>
条件渲染 v-if
通过 v-if
指令,判断if中的内容是否为true,从而控制数据是否渲染
<div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { seen: true } }) </script>
同 v-if
类似的还有 v-show
指令
<div id="app"> <p v-show="seen">现在你看到我了</p> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { seen: true } }) </script>
v-show
指令用法和v-if
几乎一样,区别在于:
v-if
控制元素是否渲染
v-show
控制元素是否显示
列表渲染 v-for
v-for
指令可以绑定数组的数据来渲染一个项目列表:
<div id="app"> <ol> <li v-for="todo in todos"> { { todo }} </li> </ol> </div>
var app = new Vue({ el: '#app', data: { todos: [ '学习 JavaScript', '学习 Vue', '整个牛项目' ] } })
v-for
中 v-for="todo in todos"
todos代表数据源,todo则是被迭代的数组元素的别名。
v-for
还支持一个可选的第二个参数,即当前项的索引。
<li v-for="(todo,index) in todos"> { {index+1}}、{ { todo }} </li>
此外v-for
也可以循环对象:
<div id="app"> <ol> <li v-for="value in object"> { { value }} </li> </ol> </div>
var app = new Vue({ el: '#app', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2022-01-01' } } })
你也可以提供第二个的参数为 property 名称 (也就是键名):
<div v-for="(value, name) in object"> { { name }}: { { value }} </div>
还可以用第三个参数作为索引:
<div v-for="(value, name, index) in object"> { { index }}. { { name }}: { { value }} </div>
优化列表渲染
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key
attribute:
<li v-for="item in todos" v-bind:key="item.id"> { { item }} </li>
建议尽可能在使用 v-for
时提供 key
attribute,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
文本渲染 v-text
<div id="app"> <p v-text="msg"></p> <p v-text="5+3"></p> <p v-text="msg+' v-text'"></p> </div> <script> var vm = new Vue({ el:"#app", data(){ return { msg:'这是一个字符串' } } }) </script>
文本渲染 v-html
<div id="app"> <p v-html="htext"></p> </div> <script> var vm = new Vue({ el:"#app", data(){ return { htext:"<b>这是</b>字符串" } } }) </script>
属性渲染
v-model 指令
v-model
指令在表单控件或者组件上创建双向绑定:
<input v-model="message" placeholder="edit me"> <p>Message is: { { message }}</p>
v-model 负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-bind 属性绑定
动态地绑定一个或多个属性 (attribute)
<p v-bind:title="msg">{ {msg}}</p> <!-- 缩写 --> <p :title="msg">{ {msg}}</p> <!-- 表单的属性绑定 --> <button :disabled="false">提交</button> <!-- class 绑定 --> <div :class="{ red: isRed }"></div>
动态绑定class
通过对象方式:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>
data: { isActive: true, hasError: false }
通过数组方式:
<div v-bind:class="[activeClass, errorClass]"></div>
data: { activeClass: 'active', errorClass: 'text-danger' }
动态绑定style
通过对象方式:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: { activeColor: 'red', fontSize: 30 }
通过数组方式
可以将多个样式对象应用到同一个元素上:
<div v-bind:style="[baseStyles, overridingStyles]"></div>
事件处理
绑定事件
为元素绑定一个事件,使用 v-on
指令,例如绑定一个单击事件:
<button v-on:click="num++">{ {num}}</button> <script> var vm = new Vue({ el:"#app", data(){ return { num:1 } } }) </script>
v-on
也可以简写成:
<button @click="num++">{ {num}}</button>
响应事件函数
<div id="app"> <button @click="calc(-1)" :disabled="num<=1">-</button> <input type="text" v-model.number="num"> <button @click="calc(1)" :disable="num >= 999">+</button> </div> <script> var vm = new Vue({ el:"#app", data(){ return { num:1 } }, methods:{ calc(step){ // js中使用data中的数据 需使用this this.num += step