Vue基础

一. Vue基础
认识Vue.js
Vue是一个渐进式的框架

渐进式意味着你可以将Vue作为你应用的一部分嵌套其中
Vue的核心库以及其生态系统
Core + Vue-router + Vuex
Vue特点和Web开发常见高级功能

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM
Vue安装方式
方式一. 直接CDN引入
可以选择引入开发环境版本 / 生产环境版本

// 开发环境版本, 包含了帮助的命令行警告
<srcipt src='https://cdn.jsdeliver.net/npm/vue/dist/vue.js'></script>

// 生产环境版本, 优化了尺寸和速度
<srcipt src='https://cdn.jsdeliver.net/npm/vue'></script>

方式二. 下载和引入

// 开发环境
https://vuejs.org/js/vue.js

// 生产环境
https://vuejs.org/js/vue.min.js
 

通过webpack和CLI的使用

Vue的MVVM
M： Model 数据模型

数据层
数据可能是固定的思数据, 更多的是来自服务器, 从网络上请求下来的数据
V: View 视图模板

视觉层
在前端开发中, 通常是DOM层
作用: 是给用户展示各种信息
VM： View-Model 视图模型

视图模型层
是View和Model沟通的桥梁
一方面实现了Data Binding (数据绑定), 讲Model的改变实时的反应到View中
另一方面实现了DOM Listener (DOM监听), 当DOM发生一些时间 (点击, 滚动, touch等) 时, 可以监听到, 并在需要的情况下改变对应的Data
二. Vue基础语法
语法糖: 简写

生命周期
事物从诞生到消亡的整个过程

模板语法
创建Vue, options可以放什么
el
data
methods
生命周期函数
…
语法
综合
插值操作 Mustache

Mustache语法 (双大括号)
可以直接写变量
可以写简单的表达式
v-once
后面不需要跟任何表达式
表示元素和组件只渲染一次, 不会随着数据的改变而变化

v-html
后面往往跟一个string类型
会将string的html解析出来并渲染

v-text
与Mustache相似, 一般不用, 不灵活

v-pre
用于跳过这个元素和它子元素的编译过程, 用于显示原本的Mustache语法

v-cloak
在某些情况下, 我们浏览器可能会直接显示出未编译的Mustache标签

v-bind
作用: 动态绑定属性
简写: :

条件判断

v-if
v-else-if
v-else
v-show

当条件为false的时
v-if: 指令的元素, 不会渲染到dom中
v-show: dom增加一个行内样式display: none
v-on
作用: 绑定事件监听
简写: @
写法:

没有参数的情况下, 可以不写(); 如果方法本身有一个参数, 会默认将原生事件event参数传递进去
如果传入某个参数, 同时需要event时, 可以通过$event传入时间
<div id="app">
  <h2>点击次数: {{counter}}</h2>
  <!--情况一: 方法没有参数-->
  <button @click="btnClick1">按钮1</button>
  <button @click="btnClick1()">按钮1</button>

  <!--情况二: 如果方法有参数-->
  <!--1.调用时不传入参数,会默认将event作为第一个参数传入-->
  <button @click="btnClick2">按钮2</button>
  <!--2.调用时不传入参数,那么参数为undefined-->
  <button @click="btnClick2()">按钮2</button>

  <!--情况三: 如果方法有参数,并且希望传入event-->
  <button @click="btnClick3(10, $event)">按钮3</button>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      btnClick1() {
        console.log('按钮1被点击');
      },
      btnClick2(payload) {
        console.log('按钮2被点击', payload);
      },
      btnClick3(num, event) {
        console.log('按钮3被点击', num, event);
      }
    }
  })
</script>

修饰符    作用    实际调用
.stop    阻止事件冒泡    event.stopPropagation()
.prevent    阻止默认事件    event.preventDefault()
{keyCode I keyAlias}    监听某个键盘的键帽    –
.native    监听组件根元素的原生事件    –
.once    只触发一次回调    –
v-for遍历数组
// 遍历过程中, 没有使用索引值
<li v-for="item in names">{{item}}</li>

// 遍历过程中, 获取索引值
<li v-for="(item, index) in names">{{index + 1}} - {{item}}</li>

// 遍历对象的时候, 只有一个值, 活得的是value

// 获取对象的key和value 
<li v-for="(value, key) in names">{{value}} - {{key}}</li>

// 获取对象的key和value和index 
<li v-for="(value, key, index) in names">{{value}} - {{key}} - {{index}}</li>

key的作用是为了高效的更新虚拟DOM
key要具有唯一性, 不然就没意义

<li v-for="(item, index) in names" :key="item">{{index + 1}} - {{item}}</li>
1
v-model表单绑定
实现表单元素和数据的双向绑定

<div id="app">
    <input type="text" v-model="message">
    {{message}}
</div>

cosnt app = new Vue({
    el: '#app',
    data: {
        message: '你好'
    }
})

// 界面的message数据改了, data里面的message就改变了, 是双向的

可以将v-model用于textarea元素

<textare v-model="message"></textare>
<p>输入内容: {{message}} </p>
1
2
其他方法实现双向绑定

// v-bind绑定一个value属性
// v-on指令给当前元素绑定input事件  
// 下面代码 等同于 使用v-model

<div id="app">
    <input type="text" :value="message" @input="message = $event.target.value">
    {{message}}
</div>

cosnt app = new Vue({
    el: '#app',
    data: {
        message: '你好'
    }
})