VUE基础知识入门
VUE基础知识入门
VUE官方文档教程链接: VUE
1.什么是Vue.js
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。它的作者是位中国人–尤雨溪（EvanYou).
它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的API。
很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。
2.Vue的优点
∷ 小而简单,轻量级框架,上手容易,简单易学,便于与第三方库或既有项目整合
∷ 只关注视图层， 采用自底向上增量开发的设计
∷ 它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
∷ 当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
∷ Vue封装了大量的组件,可以直接使用,简便而而美,省去了大量的Js代码.(有字体\主题\各种表单,表格,图标,按钮,提示框,导航栏等等)
链接: Vue组件Element官方文档:组件|Element
3.Vue的使用
创建一个 .html文件,然后通过如下方式引入Vue:
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
再或者:
到Vue官网 Vue官网 点击左侧安装 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量
下载安装
可以看到有两个版本 , 我们使用开发版本即可. 生产版本是压缩后的版本,删除了警告,更精悍简单
①. 初识Vue的简单例子: Hello Vue!
Vue的简单例子: Hello Vue!
运行结果: Hello Vue!
new Vue 是创建了一个Vue实例;
el: '#app'意思是让Vue实例去接管id为'app'的div里面的内容,即为Vue实例和这个div的Dom元素做了绑定,el绑定的div为挂载 点
data : 就是vue的一些数据
{{message}} : 通过el和div做了绑定之后,可以直接通过{{}}双花括号的形式显示在data里的message的数据
如果在别的div里写{{message}}是不会显示'Hello Vue!'的,只会显示{{message}},因为Vue实例只会去处理id为'app'的 这个div里面的内容.
②. Vue的常用指令
Vue指令以v-开头，作用在HTML元素上，将指令绑定在元素上时，会给绑定的元素添加一些特殊行为，可将指令视作特殊的HTML属性
∷ v-model 在表单元素上实现双向绑定
∷ v-if指令 条件判断指令，根据表达式值的真假来插入或删除元素，表达式返回一个布尔值
∷ v-show指令 条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if 的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值
∷ v-else指令 可配合v-if或v-show使用，v-else指令必须紧邻v-if或v-show，否则该命令无法正常工作。v-else绑定的元素能否 渲染在HTML中，取决于前面使用的是v-if还是v-show。若前面使用的是v-if，且v-if值为true，则v-else元素不会渲染；若前面使用的是v-show，且v-show值为true，则v-else元素仍会渲染到HTML。
∷ v-for指令 循环指令，基于一个数组渲染一个列表，与JavaScript遍历类似，语法如下：
v-for = "item in items"
∷ v-bind指令 给DOM绑定元素属性，语法如下：
v-bind:argument="expression"
其中，argument通常是HTML元素的特性，如：v-bind:class="expression"。
注：v-bind指令可以缩写为:冒号。如：:class="expression"。
∷ v-on指令 用于监听DOM事件，语法与v-bind类似，如监听点击事件v-on:click="doSth"
注：v-on指令可以缩写为@符号。如：@click="doSth"。
③. Vue的键盘事件
<!--@keydown.xx,点什么键,就是按下什么键触发事件-->
<input @keydown.enter="keyEnter()"/> //按下回车键即触发事件
<input @keydown.a="kerA()" /> //按下键盘的A键
④. Vue的事件冒泡
什么是事件冒泡: 在div的层层嵌套中,触发最里面的事件,会相继触发一层层的事件,即为事件冒泡
阻止冒泡: 给事件添加@click="show($event)"
show: function (e) {
alert("this is 3");
e.stopPropagation(); //阻止
}
或者直接@click.stop="show($event)",就不用写e.stopPropagation();
<!--阻止事件默认方法-->
<button @click.prevent.stop="show()">text</button>
⑤. methods: Vue方法
methods: {
//这个是要执行的函数
hello: function() { }
}
methods里面放vue的方法
⑥. 钩子函数 :mounted
对于前端来说，钩子函数就是指在所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行。
mounted: function() {
//这个是钩子函数 ,如果hello函数要执行，必须先执行钩子函数
}
⑦.计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
我们来看下官网给我们的案例:
翻转字符串
以上的模板变的很复杂起来，也不容易看懂理解。在模板中放入太多的逻辑会让模板过重且难以维护.
所以这时候我们就需要使用计算属性:
计算属性 computed案例
⑧. computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖 发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 可以说使用 computed 性能会 更好，但是如果你不希望缓存，你可以使用 methods 属性。
⑨. Vue.js 监听属性 watch
watch 来响应数据的变化。当你有一些数据需要随着其它数据变动而变动时，在一些情况下我们会需要用到watch
以下实例通过使用 watch 实现计数器：
通过使用 watch 实现计数器
效果:
效果
以上就是我总结的Vue的常用基础,当然还有很多很多,我就不一一举例了,大家可以到Vue的官网进行学习,Vue.也可以在网上找一些学习视频跟着练习,相信大家只要静下来好好去学习,是很容易就学好Vue的,机油!祝愿大家2019心想事成,工作顺利,升职加薪,白天有说有笑,晚上睡个好觉!
