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心想事成,工作顺利,升职加薪,白天有说有笑,晚上睡个好觉!