基础语法

v-model 数据双向绑定

v-if 选择控制

v-show 选择控制

与v-if不同的是v-show不管险不显示都会存在DOM树中，只是display = none

v-bind 绑定html属性

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

例：如果输入框内的文本长度小于2，按钮事件无效

也可以缩写

常用的是利用设置html属性动态设置类。

设置一个类的情况：

设置多个类的情况：

v-text 动态文本

与{{xxx}}类似，动态绑定文本，修改即会更新

v-once 静态文本

只会初始化时赋值一次，不会随着数据变化动态更新

v-for 循环

循环猫猫名字

查看html，可以看到循环出来多个<li>

JS类

类的属性cat.name

v-on 为事件添加监听

官方文档

this关键字代表当前Vue实例；

使用push方法为数组添加新class;

使用{}生成新的class;

原生 DOM 事件keyup.enter按下回车时触发 清空newCat v-on可以缩写为@

filters 过滤器

将名字显示为大写；

原数据不变，只是显示的时候进行转换；

computed 计算属性

有getter和setter两种方法，常用getter，用于处理复杂逻辑

官方文档

菜鸟解释的更详细

component 组件

代码重用，模块化；

生命周期

Vue工程

新建工程

D:\Alovebc\VUEE\newtest>vue create ntest
//选默认的default
D:\Alovebc\VUEE\newtest>npm install -g @vue/cli
D:\Alovebc\VUEE\newtest>cd ntest
D:\Alovebc\VUEE\newtest\ntest>npm run serve

组件

添加Bootstrap依赖

安装依赖

npm i bootstrap-vue bootstrap

main.js

import Vue from 'vue'
import BootsrapVue from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import App from './App.vue'

Vue.use(BootsrapVue)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

复制粘贴(误)