vue专题 - 基础补习

本文主要是介绍vue专题 - 基础补习，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

以前看着vue文档编过一些小样，但一直没有实现过整体的应用。不常用也就忘了，再用还得看文档T_T。
就着这次网易微专业的vue基础课程，结合相关文档，尽量系统的回顾vue及相关框架的使用方法。

vue文档
vue-router文档
webpack文档
vue-cli文档
vuex文档
axios文档

先上课程记录：

基础

以下代码创建了一个vue实例，且可以通过vm来获取实例中的属性，包括$data,$el等
参考：vue实例属性

// 创建一个Vue实例
var vm = new Vue({// 元素el: '#app',// 数据data: {},// 方法methods: {},// 计算属性computed: {},// 侦听器watch: {},// 钩子函数beforeCreate() { },created() { },beforeMount() { },mounted() { },beforeUpdate() { },updated() { },beforeDestroy() { },destroyed() { }
})

注：不要在选项属性或回调上使用箭头函数 ¹

<span>Message: {{ msg }}</span>
<!-- 只执行一次插值 -->
<span v-once>这个将不会改变: {{ msg }}</span>
<!-- 作为html代码进行渲染 -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p><!-- 绑定id -->
<div v-bind:id="dynamicId"></div><!-- 使用javascript表达式 -->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}<!-- 指令 -->
<p v-if="seen">现在你看到我了</p>
<h1 v-show="ok">Hello!</h1>
<!-- 列表渲染 -->
<ul id="example-1"><li v-for="item in items">{{ item.message }}</li>
</ul><!-- 动态参数 -->
<a v-bind:[attributeName]="url"> ... </a><!-- 修饰符：事件修饰符、按键修饰符、系统修饰健 -->
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 缩写 -->
<div :id="dynamicId">...</div>
<a @click="doSomething">...</a><!-- 表单输入绑定 -->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

参考：修饰符

注：模板表达式 ²

注：动态参数的约束 ³

知识技能获取，感谢[网易云课堂 - 微专业 - 前端高级开发工程师]运营团队。

---

1. 比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。 ↩︎

2. 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。 ↩︎

3. 动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的。同样，在 DOM 中使用模板时你需要回避大写键名。 ↩︎

这篇关于vue专题 - 基础补习的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---