vue初级

前言
一、Vue是什么？
二、Vue的优缺点
- 1.优点
- 2.缺点
三、安装
- (2)使用
- (3)函数的声明和使用
四、指令系统
- 1.数据双向绑定
- 2.内容展示
- 3.条件判断
- - (1)v-if、v-else、v-else-if
  - (2)v-show
五、容易忘记的小知识点
总结

前言

本文介绍了vue的特点以及基本指令。
ps：由于这是小编第一次创作，有很多不足的之处，希望各位大神海涵，欢迎各位大神在评论区补充。

一、Vue是什么？

首先Vue.js是一套响应式系统，前端开发库。在现在的市场上，Vue是非常流行的JavaScript技术开发框架之一，其他的前端开发库也有很多，比如jQuery、ExtJS、Angular等。
这是官网 http://cn.vuejs.org

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的作者，就是大名鼎鼎的“尤雨溪”。
尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位。在2014年2月开源了这个前端开发库Vue.js。

二、Vue的优缺点

1.优点

①轻量级框，体积小，运行速度快

②简单易学

③双向数据绑定

④组件化开发

⑤虚拟DOM

⑥指令系统

2.缺点

①兼容性差，不支持ie8以下的浏览器

②seo优化不好

三、安装

①script

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

开发版本

生产版本

②npm

查看npm配置

npm config list

如果镜像地址不是淘宝，设置淘宝镜像

npm config set registry https://registry.npm.taobao.org

下载vue

npm install vue

(2)使用

第一步：引入vue.js

<script src="./node_modules/vue/dist/vue.js"></script>

src的地址是本地或者在线的都可以

第二步：设置一个挂载点

<div id="app"></div>

建议设置为id属性，因为vue只会匹配到第一个指定的元素作为挂载点

第三步：实例化vue，并传入配置参数

new Vue({el:"#app",//el element 相当于getElementById、querySelectordata:{//定义初始数据msg:'hello vue.js'}
})

(3)函数的声明和使用

methods配置选项来声明自定义函数

<script>
new Vue({el:"#app",//el element 相当于getElementById、querySelectordata:{//定义初始数据msg:'hello vue.js'},methods:{// 声明自定义函数// getMsg:function(){//     console.log('getmsg....')// }getMsg(){console.log('get new msg...')//获取vue实例中的初始数据console.log(this.msg)}}
})
</script>

在挂载点内调用声明好的函数

<div id="app"><!-- 在挂载点内调用函数，注意要在函数名称后面加上小括号 -->{{ getMsg() }}
</div>

四、指令系统

<标签 v-指令></标签>

1.数据双向绑定

v-model可以给表单元素进行数据的双向绑定，可以展示初始数据，并在页面中对初始数据进行修改

示例代码：

<div id="app"><!-- 给输入框进行数据的绑定 --><input v-model="msg"/><!-- 在h1中展示数据 --><h1>{{ msg }}</h1>
</div>
<script>new Vue({el:"#app",data:{msg:''}})
</script>

2.内容展示

①{{ }} 文本插值语法（Mustache）

在文本插值语法中，可以展示变量、执行单行js语法

<!-- 在h1中展示数据 -->
<h1>{{ msg }}</h1>
<!-- 调用函数 -->
{{ getMsg() }}
<!-- 三目运算 -->
{{ isok ? '已登录':'未登录' }}
<!-- 直接进行数学运算 -->
{{ 10 + 30 }}
<!-- 调用对象类型数据中的属性 -->
{{ info.name }}

②v-text

<h1 v-text="msg"></h1>

v-text适用于内容固定的场景，会把指定标签内容替换成v-text数据绑定的值。

③v-html

v-text和v-html非常相似，但是v-html可以解析html语法

<h1 v-html="msg"></h1>

3.条件判断

(1)v-if、v-else、v-else-if

v-if 单路分支

<标签 v-if="布尔值或者条件表达式" ></标签>

当布尔值或者条件表达式为true时，指定的标签会在页面结构中存在，否则就不存在

v-if、v-else 双路分支

<标签 v-if="布尔值或者条件表达式" ></标签>
<标签 v-else></标签>

v-if、v-else-if … 、v-else 多路分支

<标签1 v-if="布尔值或者条件表达式" ></标签>
<标签n v-else-if="布尔值或者条件表达式n" ></标签>
...
<标签n+1 v-else></标签n+1>

！！！重点 v-else和v-else-if只能依存于v-if才能使用

(2)v-show

v-show作用是根据指定的布尔值或者条件表达式，来显示/不显示指定的标签

如果布尔值或者条件表达式为true时，则在页面中显示指定的标签

否则，在指定的标签上添加了一个display:none

v-if和v-show的区别

相同之处：都可以根据布尔值或者条件表达式来控制指定的元素在页面上显示/不显示

不同之处：

v-if它是惰性加载，只有满足条件的标签才会在页面结构中存在；

v-show不论条件表单式是否或者false，对应的标签都会在页面结构中存在，只不过当结果为true时才显示，为false时会给指定的元素添加display:none。