Vue 学习笔记 - 基础（上）

安装

Vue Devtools

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

直接用 ＜script＞引入

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

命令行工具 (CLI)

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

介绍

官方介绍 就不错，还带视频。

Vue 实例

Vue 的实例化方式很 js

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

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

模板语法

{{ }}：文本插值

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

v-html：插 html

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

v-bind 指令：绑定属性

• v-bind:属性名="属性值"。属性值可以是变量或表达式(表达式可访问的全局变量白名单)
• 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"

修饰符

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

<form v-on:submit.prevent="onSubmit">...</form>

计算属性和侦听器

计算属性 computed

下面这个num可以被当成一个普通变量使用。

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

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

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="app">
			<p>computed: {{num}}</p> <p>methods: {{num_methods()}}</p> 
			<button @click="fls">获取一次</button>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {a: 1,b: 2},
				computed: {
					num: function() {console.info('computed 执行1次');return this.a + this.b;}
				},
				methods: {
					num_methods: function() {console.info('methods 执行1次');return this.a + this.b;},
					fls: function(){this.num;this.num_methods();}
				}
			})
		</script>

计算属性 vs 侦听属性

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
	<p>{{test}}</p>
	<input type="text" v-model="test"/>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {test: "test9test"},
		watch: {
			test: function(newValue, oldValue) { 
				console.info(`修改前：${oldValue}，修改后：${newValue}`);
			}
		}
	})
</script>

计算属性的 setter

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

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

计算属性接受参数

<div v-for="(user, index) in list" :key="user.id">{{name(user)}}</div>

name() {
	return function(item) {
		return `名称：${item.name}`;
	};
},

侦听器 watch

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

Class 与 Style 绑定

绑定 HTML Class

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

对象语法

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

<p :class="{calssA:true, b:false, c:null, d:undefined, e:'', f:1 }">666</p>

结果：

<p class="calssA f">666</p>

数组语法

• 此处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为样式值，样式值是个变量

<p :style="{color:'red'}">999</p>

结果：

<p style="color: red;">999</p>

数组语法

每个元素是一个对象。

自动添加前缀

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

多重值

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

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

参考资料

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

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

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