安装
npm init vue@latest
创建第一个实例
export default{
date(){
return {
数据区域
}
}
}
<template>
HTML5
</template>
1.插值表达式
{{x}} x为数据名称 也可以写计算属性 如
...
return {
a:50
}
...
//也可使用三元表达式
{{a}},{{a-10}} //可写在模板标签内
// 50 40
如果需要显示在模板显示html可以使用 v-html
...
return {
rawHtml: '<span style="color: red">This should be red.</span>'
}
...
<p><span v-html="rawHtml"></span></p>
//文字为红色
双大括号不能在属性中使用 想要响应式地绑定一个属性轻使用
1.1v-bind 简写 :
...
return {
a:redclass
}
...
<div :class="a"></div>
//等同 <div :class="redclass"></div>
//如果属性为布尔型
---
{
disabled:true
}
---
<button :disabled="a"></button>
//依据 true / false 值来决定 属性 是否应该禁用按钮
1.2动态绑定多个值
data() {
return {
objectOfAttrs: {
id: 'container',
class: 'wrapper'
}
}
}
<div :="objectOfAttrs"></div>
//等同于 <div id="container" class="wrapper"></div>
2.声明方法(函数)
method(){}
//在data同级下
method(){
方法名(形参){
//代码块
}
}
2.1v-on 简写 @
指令类似于 JS中的 click 事件 它将监听 DOM 事件 如
methods:{
btnclick(){
console.log('鱿鱼须')
}
}
<button @click="btnclick">按钮</button>
2.2动态绑定
---
return {
btnArray: "click"
}
...
methods: {
as() {
console.log(123);
}
}
---
<button @[btnArray]="as()">按钮</button>
3.计算属性 computed
computed:{
a(a,b){
return a + b
}
}
---VS---
methods:{
a(a,b){
return a + b
}
}
/*计算属性与方法不同的地方在于
计算属性值会基于其响应式依赖被缓存
如果不改变计算属性的参数计算属性不会重新计算*/
4.绑定 HTML class
<div :class="{ active: isActive }"></div>
//active类是否显示 取决于isActive的真假值
当然也可以绑定一个对象 声明多个class属性
data() {
return {
ass: {
asone:true,
astwo:false
}
}
}
<div :class="{{ass}}"></div>
===
<div :class="asone"></div>
也可以通过数组的形式绑定多个css class 属性
data() {
return {
asone:newone,
astwo:newtwo
}
}
<div :class="[asone,astwo]"></div>
===
<div :class="[newone,newtwo]"></div>
4.1:style
支持绑定 JavaScript 对象值，对应的是 [HTML 元素的 style 属性] 多数情况下 我们喜欢以下写法
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
<div :style="styleObject"></div>
5.v-if / v-else
return {
a:1
}
<div v-if="a"></div> //显示
<div v-eles="a"></div> //隐藏
5.1v-show
<h1 v-show="ok">Hello!</h1>
不同之处在于 v-show 会在 DOM 渲染中保留该元素；
v-show 仅切换了该元素上名为 display 的 CSS 属性。
v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。
6.v-for的使用
语法:
data() {
return {
ass: ["arrondeday", "assor"]
}
}
<ul v-for="(item,index) in ass"> item为值 index为索引 相当于forEach
<li>{{item}} + {{index}}</li>
</ul>
//结果
<li>arrondeday + 0</li>
<li>assor + 1</li>
6.1v-for 与对象
<ul>
<li v-for="value in myObject">
{{ value }}
</li>
</ul>
data() {
return {
myObject: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
}
<ul>
<li v-for="(value,key,index) in myObject"> //value为值 key可自定义为属性(id,class...),index为索引
{{ value }} + {{key}} + {{index}}
</li>
</ul>
v-for 比 v-if 的优先级更高 不要忘记 :key="item.id" ！！！
如果需要两个同时使用 可在外包裹一层template标签 并把循环语句放上去
6.1数组方法
-
push() -
pop() -
shift() -
unshift() -
splice() -
sort() -
reverse()在计算属性中使用
reverse()和sort()的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做
7.事件处理
7.1事件修饰符
在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。
为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：
-
.stop -
.prevent -
.self -
.capture -
.once -
.passive<!-- 单击事件将停止传递 --> <a @click.stop="doThis"></a> <!-- 提交事件将不再重新加载页面 --> <form @submit.prevent="onSubmit"></form> <!-- 修饰语可以使用链式书写 --> <a @click.stop.prevent="doThat"></a> <!-- 也可以只有修饰符 --> <form @submit.prevent></form> <!-- 仅当 event.target 是元素本身时才会触发事件处理器 --> <!-- 例如：事件处理器不来自子元素 --> <div @click.self="doThat">...</div> -------------------------------------- <!-- 添加事件监听器时，使用 `capture` 捕获模式 --> <!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 --> <div @click.capture="doThis">...</div> <!-- 点击事件最多被触发一次 --> <a @click.once="doThis"></a> <!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 --> <!-- 以防其中包含 `event.preventDefault()` --> <div @scroll.passive="onScroll">...</div>
7.2按键修饰符
在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。
<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />
略。。。 更多修饰符 请访问 cn.vuejs.org/guide/essen…
8.表单输入绑定
在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。
Vue中可以直接使用
<input v-model="text"> //text为存储数据的变量名
当然也可以在
<textarea>中使用
<textarea v-model="text"></textarea>
以及复选框
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
8.1修饰符
.lazy
默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />
.number
如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：
<input v-model.number="age" />
如果该值无法被 parseFloat() 处理，那么将返回原始值。
number 修饰符会在输入框有 type="number" 时自动启用。
.trim
如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：
<input v-model.trim="msg" />
9.生命周期
10.侦听器
watch
语法:
...
data() {
return {
question: '',
...
watch: {
// 每当 question 改变时，这个函数就会执行
question(newQuestion, oldQuestion) { //第一个参数为变化后的数值 第二个为之前的数值
console.log(111)
}
},
}
在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。这时我们可以用一个对象来声明侦听器，这个对象有 handler 方法和 immediate: true 选项，这样便能强制回调函数立即执行：
export default {
// ...
watch: {
question: {
handler(newQuestion) { //如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 选项：
#flush: 'post'#
console.log(1) // 在组件实例创建时会立即调用
},
// 强制立即执行回调
immediate: true
}
}
// ...
}
