Vue 学习笔记 - 基础（上）

野性酷女 2023-02-17 14:24 20阅读 0赞

### VUE学习笔记 - 基础（上） ###

*  安装
 *   *  Vue Devtools
     *  直接用 ＜script＞引入
     *  命令行工具 (CLI)
 *  介绍
 *  Vue 实例
 *  模板语法
 *   *  \`\{ \{ \}\}\`：文本插值
     *  \`v-html\`：插 html
     *  \`v-bind\` 指令：绑定属性
     *  \`v-on\` 指令：监听 DOM 事件
     *  修饰符
 *  计算属性和侦听器
 *   *  计算属性
     *   *  基础例子 + 计算属性缓存 vs 方法
         *  计算属性 vs 侦听属性
         *  计算属性的 \`setter\`
     *  侦听器
 *  Class 与 Style 绑定
 *   *  绑定 HTML Class
     *   *  对象语法
         *  数组语法
         *  用在组件上
     *  绑定内联样式
     *   *  对象语法
         *  数组语法
         *  自动添加前缀
         *  多重值
 *  参考资料

# 安装 #

## Vue Devtools ##

Vue专用的浏览器调试插件。 官方没有详细说，我写了份学习笔记 [vue-devtools 编译安装][vue-devtools]。

## 直接用 ＜script＞引入 ##

这种方式基本只有新人刚开始学习时会用到，所以只记得引入js即可使用就行。

生产中一般直接`IDE`或`Vue CLI`创建`Vue项目`，这些都不用我们管。

## 命令行工具 (CLI) ##

官方提供的脚手架，便于创建Vue项目。还有UI界面版本。  
参考资料：[Vue CLI 官方文档][Vue CLI]、[我的 Vue CLI 学习笔记][Vue CLI 1]

# 介绍 #

[官方介绍][Link 1] 就不错，还带视频。

# Vue 实例 #

`Vue` 的实例化方式很 `js`

var mydata = {  test: "test9test" }; //参数对象
    var vm = new Vue({  
    	data : mydata 
    });

如果想初始化后就不许再改了，可以冻结它`Object.freeze(mydata)`  
除了`data` 还有很多选项：[从【选项 / 数据】开始，向下看吧][Link 2]

# 模板语法 #

## `{ { }}`：文本插值 ##

<span> 这样就可以将 {
       { 初始化时data中的变量 }} 绑定到元素里了，还能实时更新 </span>

## `v-html`：插 html ##

// 变样这样
    myHtml = "<span>666</span>";
    // 模板中写法 
    <p v-html="myHtml"></p>
    //结果
    <p><span>666</span></p>

## `v-bind` 指令：绑定属性 ##

*  `v-bind`:`属性名`=`"属性值"`。属性值可以是`变量`或`表达式`([表达式可访问的全局变量白名单][Link 3])
 *  `v-bind`:`[属性名用变量]`=`"属性值"`
 *  简写`:` 。`v-bind:src="imgurl"`可以简化为`:src="imgurl"`
 *  `提醒`：html5 属性存在即生效。 如：disabled，disabled=“true”，disabled=“false” 都是生效

// 注意字符串我加了单引号
    <img v-bind:src="'https://www.baidu.com/img/flexible/logo/pc/result.png'"/>
    // 简写
    <img :src="'https://www.baidu.com/img/flexible/logo/pc/result.png'"/>

## `v-on` 指令：监听 DOM 事件 ##

*  `v-bind`:`事件名`=`"回调函数"`
 *  简写`@`。`v-on:click="foo"`简写`@click="foo"`

## 修饰符 ##

典型的场景，阻止表单默认行为：

# 计算属性和侦听器 #

## 计算属性 ##

这里的`num`可以被当成一个普通变量使用。

### 基础例子 + 计算属性缓存 vs 方法 ###

和`方法`相比区别是：只有`a,b`变化过，才会重新计算。

### 计算属性 vs 侦听属性 ###

### 计算属性的 `setter` ###

定义一个属性`num`默认只定义了`getter`。下面是设置 `setter` 的写法

// ...
    computed: { 
      num: { 
        get: function () {  return a; },
        set: function (newValue) {  this.a = newValue; }
      }
    }
    // ...

## 侦听器 ##

官方举例时说的是：大部分情况用`计算属性`更简便。但如果有`异步`请求数据或是`开销较大`的操作时就适合`侦听器`了。

# Class 与 Style 绑定 #

## 绑定 HTML Class ##

`v-bind:class`=`"class属性值"`，简写：`:class`=`"class属性值"`

### 对象语法 ###

*  此处`class属性值`可以是`普通变量`、`对象变量`、`对象字面量`
 *  对象中的`key`将作为 `class名`, `value`为`布尔变量`，当为`真`绑，为`假`不绑

结果：

### 数组语法 ###

*  此处`class属性值`可以是`数组变量`、`数组字面量`
 *  数组中每个元素都是`变量`，变量的`值`才是最终会添加到元素上的`class名`
 *  当然`元素`也可以是一个`对象`，规则与上面对象语法一至。

### 用在组件上 ###

*  使用组件时添加的`class="a b c"`会追加到`模板根元素`的`calss`上
 *  组件也可以使用上面绑定的玩法。

<my-component :class="[classA, 'a', 'b']"></my-component>

## 绑定内联样式 ##

`v-bind:style`=`"style属性值"`，简写：`:style`=`"style属性值"`

*  `style`属性的值

### 对象语法 ###

*  此处`style属性值`可以是`普通变量`、`对象变量`、`对象字面量`
 *  对象中的`key`将作为 `样式名`, `value`为`样式值`，`样式值`是个变量

结果：

### 数组语法 ###

每个元素是一个对象。

### 自动添加前缀 ###

Vue.js 会`自动`侦测并`添加`相应的浏览器`引擎前缀`。

### 多重值 ###

将`display`的多个可选值放在数组中，会自动渲染最后一个可用值。

# 参考资料 #

[Vue 官方教程基数篇 - 本笔记的学习对象][Vue _ -]  
[Vue 官方CLI 官方文档][Vue CLI]  
[Vue 官方API 参考][Vue _API]  
[Vue 官方API文档 - 生命周期钩子][Vue _API_ -]

[vue-devtools 编译安装][vue-devtools]  
[我的 Vue CLI 学习笔记][Vue CLI 1]  
[Vue 学习笔记 - 基础（上）][Vue _ - 1]  
[Vue 学习笔记 - 基础（中）][Vue _ - 2]  
[Vue 学习笔记 - 基础（下）组件基础][Vue _ - 3]  
[Vue 学习笔记 - 深入了解组件][Vue _ - 4]

[千锋教育-李卫民 Vue 渐进式 JavaScript 框架][-_ Vue _ JavaScript]

[vue-devtools]: https://blog.csdn.net/jx520/article/details/106635106
[Vue CLI]: https://cli.vuejs.org/zh/
[Vue CLI 1]: https://blog.csdn.net/jx520/article/details/106609547
[Link 1]: https://cn.vuejs.org/v2/guide/index.html
[Link 2]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
[Link 3]: https://github.com/vuejs/vue/blob/v2.6.10/src/core/instance/proxy.js#L9
[Vue _ -]: https://cn.vuejs.org/v2/guide/
[Vue _API]: https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B-property
[Vue _API_ -]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
[Vue _ - 1]: https://blog.csdn.net/jx520/article/details/106745449
[Vue _ - 2]: https://blog.csdn.net/jx520/article/details/106752594
[Vue _ - 3]: https://blog.csdn.net/jx520/article/details/106805544
[Vue _ - 4]: https://blog.csdn.net/jx520/article/details/106812618
[-_ Vue _ JavaScript]: https://www.funtl.com/zh/guide/Vue-%E6%B8%90%E8%BF%9B%E5%BC%8F-JavaScript-%E6%A1%86%E6%9E%B6.html