VueJS 基础部分（1）

第一章 基础语法

1.1 安装 Vuejs

• CDN 引入
• 下载引入
• npm 安装

1.2 初体验

• Hello Vuejs
  • mustache -> 体验 vue 响应式
• Vue 列表展示
  • v-for
  • 后面给数组追加元素的时候,新的元素也可以在界面中渲染出来
• Vue 计数器小案例
  • 事件监听:click->methods

1.3 Vue 中的 MVVM

• Model-View-ViewModel

  MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

1.4 创建 Vue 时, options 可以放那些东西

• el
• data
• method

const app=new Vue({
    el:'#app', // 绑定控件
    data:{
        message:'hello'
    },
    methods:{
        sayMessage:{
            console.log(this.message)
        }
    }
})

第二章 插值语法

2.1 mustache 语法

  <div id='app'>
    <h2>{{message}}</h2>
    <!-- mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式 -->
    <h2>{{fistName + ' ' + lastName}}</h2>
    <h2>{{fistName}} {{lastName}}</h2>
    <h2>{{counter * 2}}</h2>
  </div>

  <script src='../js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello',
        fistName: 'Tom',
        lastName: 'Bob',
        counter: 10
      }
    })
  </script>

2.2 v-once

作用：该指令代表的元素和组件只渲染一次,不会随着数据的改变而改变

2.3 v-html

作用：能解析返回的完整代码

2.4 v-text

缺点：后面不能跟数据

2.5 v-pre

作用：不会对 script 进行解析,直接显示出标签中的内容

2.6 v-cloak

作用：延时出来(搭配 setTimeout 函数)

第三章 动态绑定

3.1 v-bind 绑定基本属性

• v-bind:str/href

3.2 v-bind 动态绑定 class

• 对象语法 :class=’{类名 1:boolean}’
• 数组语法

3.3 v-bind 动态绑定 style

• 对象语法
• 数组语法

第四章 计算属性

4.1 计算属性的本质

fullName: {
    set(), get()
}

4.2 计算属性和 methods 对比

• 计算属性在多次使用时，只会调试一次
• 它是有缓存的

案例一 (firstName+lastName)

const app = new Vue({
    el: '#app',
    data: {
        firstName: 'Tom',
        lastName: 'Jam',
    },
    computed: {
        fullName: function () {
            return this.firstName + '' + this.lastName
        },
    },
})

案例二 (books->price)

const app = new Vue({
    el: '#app',
    data: {
        books: [
            { id: 110, name: 'Unix编程', price: 119 },
            { id: 111, name: '代码大全', price: 105 },
            { id: 112, name: '数据库', price: 152 },
        ],
    },
    computed: {
        // 计算属性
        totalPrice: function () {
            let result = 0
            for (let i in this.books) {
                result += this.books[i].price
            }
            return result
        },
    },
})

第五章 事件监听(v-on)

5.1 事件监听基本使用

// 写法一
<button v-on:click="increment">+</button>
// 写法二
<button @click="decrement">-</button>

5.2 参数问题

1. btnClick

<!-- 1. 事件调用的方法没有参数 -->
<button @click="btnClick">按钮1</button>
<button @click="btnClick()">按钮1</button>

2. btnClick(event)

<!-- 2. 在事件定义时,写方法时省略了小括号,
但是方法本身是需要一个参数的,这个时候,vue会默认将浏览器生产的event事件对象作为参数传入到方法 -->
<button @click="btn2Click(123)">按钮2</button>
<button @click="btn2Click()">按钮2</button>
<button @click="btn2Click">按钮2</button>

3. btnClick(abc,event) ==> $event

<!-- 3. 在方法定义时,我们需要event对象, 同时又需要其他参数 -->
<!-- 在调用方式, 如何手动的获取到浏览器参数的event对象: $event -->
<button @click="btn3Click(123,$event)">按钮3</button>

5.3 修饰符

1. stop

<div @click="divClick">
    <!-- 1. .stop修饰符的使用: 停止冒泡 -->
    <button @click.stop="btnClick">按钮</button>
</div>

2. prevent

<!-- 2. .prevent修饰符的使用: 阻止默认行为 -->
<form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick" />
</form>

3. enter

<!-- 3. .enter监听某个键的点击 -->
<input type="text" @keyup.enter="keyUp" />

4. once

<!-- 4. .once修饰符的使用:只触发一次回调 -->
<button @click.once="btn2Click"></button>

5. native

第六章 条件判断

6.1 v-if/v-else-if/v-else

<!-- 比较繁琐(不常用 v-else-if) -->
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>

6.2 案例(登录小案例)

<div id="app">
    <span v-if="isUser">
        <label for="username">用户账户</label>
        <!-- key="" 避免input复用 -->
        <input
            type="text"
            id="username"
            placeholder="请输入用户账户"
            key="username"
        />
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input
            type="email"
            id="email"
            placeholder="请输入用户邮箱"
            key="email"
        />
    </span>
    <button @click="isUser = !isUser">切换类型</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isUser: true,
        },
    })
</script>

6.3 v-show

v-show(不常用) 和 v-if(常用) 的区别

<!-- v-if 当isShow变成false时,直接不会存在于DOM中 -->
<h2 v-if="isShow" id="aaa">{{message}}</h2>

<!-- v-show 当isShow变成false时,只是修改了行内样式：display:none -->
<h2 v-show="isShow" id="bbb">{{message}}</h2>

第七章 循环遍历

7.1 遍历数组

<div id="app">
    <!-- 1. 在遍历中没有是使用索引值(下标值) -->
    <ul>
        <li v-for="item in names">{{item}}</li>
    </ul>
    <!-- 2. 在遍历过程中,获取索引值 -->
    <ul>
        <li v-for="(item,index) in names">{{index + 1}}.{{item}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            names: ['Tom', 'Jam', 'Sam', 'Jon', 'Bob'],
        },
    })
</script>

7.2 遍历对象

1. value

<!-- 在遍历对象的过程中,如果只是获取一个值,那么获取到的就是value -->
<ul>
    <li v-for="item in info">{{item}}</li>
</ul>

2. value 和 key

<!-- 获取key和value -->
<ul>
    <li v-for="(value, key) in info">{{key}}-{{value}}</li>
</ul>

3. value 和 key 和 index

<!-- 获取key和value和index (不常用) -->
<ul>
    <li v-for="(value, key, index) in info">{{index}}-{{key}}-{{value}}</li>
</ul>

7.3 响应式的数组

1. push() : 数组最后添加元素

this.letters.push('aaa', 'bbb', 'ccc')

2. pop() : 删除数组中最后一个元素

this.letters.pop()

3. shift() : 删除数组中第一个元素

this.letters.unshift('aaa', 'bbb', 'ccc')

4. unshift() : 在数组最前面添加元素

this.letters.unshift('aaa', 'bbb', 'ccc')

5. splice(a, b, c) : 删除元素/插入元素/替换元素

1. a : 起始位置
2. b : 删除的个数
3. 3 : 插入的元素(一个或多个)

// 5.1 删除元素(起始位置,删除元素个数)
this.letters.splice(2, this.letters.length - 2) // 从第二个开始删到最后
// 5.2 替换元素(先删除后再追加元素)
this.letters.splice(1, 3, 'w', 'x', 'y', 'z')
// 5.3 插入元素
this.letters.splice(2, 0, 'x', 'y')

6. sort() : 排序==>正序

this.letters.sort()

7. reverse() : 排序==>倒序

this.letters.reverse()

注意：通过索引值修改数组中的元素(非响应式)

this.letters[0] = 'bbbb'

8. set(要修改的对象，索引值，修改后的值)

Vue.set(this.letters, 0, 'bbb')

第八章 表单(v-model)

8.1 基本使用

• v-bind => value
• v-on => input

<!-- v-model 双向绑定 input中输入的值对h2中的值有影响-->
<input type="text" v-model="message" />
<h2>{{message}}</h2>

8.2 v-model 和 radio/checkbox/select

v-model 和 radio

<div id="app">
    <label for="male">
        <input type="radio" id="male" value="男" v-model="gender" />男
    </label>
    <label for="female">
        <input type="radio" id="female" value="女" v-model="gender" />女
    </label>
    <h2>你的性别: {{gender}}</h2>
</div>

v-model 和 checkbox

<!-- 1.checkbox 的单选框 -->
<label for="protocol">
    <!-- isProtocol 初始为 false -->
    <input type="checkbox" id="protocol" v-model="isProtocol" />同意协议
</label>
<h3>你选择的是: {{isProtocol}}</h3>
<!-- 当 isProtocol 为 true 时 可以点击下一步 -->
<button :disabled="!isProtocol">下一步</button>
<br />

<!-- 2.checkbox 的复选框 -->
<label for="">
    <input type="checkbox" value="篮球" v-model="hobbies" />篮球
    <input type="checkbox" value="足球" v-model="hobbies" />足球
    <input type="checkbox" value="乒乓球" v-model="hobbies" />乒乓球
    <input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球
</label>
<h3>你的爱好: {{hobbies}}</h3>

<!-- 3. 值绑定 -->
<!-- originHobbies:['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球'] -->
<label :for="item" v-for="item in originHobbies">
    <input type="checkbox" :id="item" :value="item" v-model="hobby" />{{item}}
</label>
<h3>你的爱好: {{hobby}}</h3>

v-model 和 select

<!-- 1. 单选 -->
<label for="hobby">
    你的爱好:{{hobby}}<br />
    <select id="hobby" v-model="hobby">
        <option value="足球">足球</option>
        <option value="篮球">篮球</option>
        <option value="乒乓球">乒乓球</option>
        <option value="羽毛球">羽毛球</option>
    </select>
</label>
<br />

<!-- 2. 多选 multiple:复选 -->
<label for="">
    <h3>你喜欢的水果: {{fruits}}</h3>
    <select name="fruit" v-model="fruits" multiple>
        <option value="香蕉">香蕉</option>
        <option value="苹果">苹果</option>
        <option value="榴莲">榴莲</option>
        <option value="葡萄">葡萄</option>
        <option value="橘子">橘子</option>
    </select>
</label>

8.3 修饰符

1. lazy(每次回车绑定)

<input type="text" v-model.lazy="message" />
<h2>{{message}}</h2>

2. number(一直保持为 number 类型)

<input type="number" v-model.number="age" />
<h2>{{age}}-{{typeof age}}</h2>

3. trim(过滤内容两端的空格)

<input type="text" v-model.trim="name" />
<h2>你的名字: {{name}}</h2>