前端Vue（一）

一、

1、创建实例

这就创建了一个vue实例。

2、vue的基本使用

上图可以看到，el 是定义范围的，#app 就是定义id为app的元素，只有这个id代表的标签范围内（包括其子元素，孙子元素…等等）才能使用。data 是定义相关数据的。msg 是变量名，这个可以随便起。

但是此时运行还是不能渲染的。

使用的方法是 双大括号：{{ 变量名 }} ，这样就能渲染了。

但是切记，script 的代码要放到渲染的标签下面，不然会渲染失败：

3、Vue的其它数据类型

a、vue的字典对象：

通过 点 来调用数据：

b、数组

可以通过切片的方式取某个位置的数据

c、对象

如果是取下标，也只是取出某一个对象。

当然，以此类推，取出对象之后，可以再取数据：

4、在双大括号（插值表达式）中书写表达式

a、字符串拼接

b、方法的调用

除了这些，还有逻辑运算等

5、el中推荐使用id选择器

el中虽然可以书写任意的选择器，但是在vue开发中推荐使用 id选择器

使用 class 的类选择器，效果也是一样的。

6、v-text和v-html

a、v-text

v-text 是把取到的值当成一个文本。

v-html 是把取到的值会先渲染html的样式，再添加到页面中。

来看下 双大括号与v-text的区别：

看的出来效果一样，那么区别在哪呢：
1、使用v-text取值会将标签中原有的数据覆盖，使用插值表达式的形式不会覆盖标签原有的数据

举个例子：

两个标签都各有自己的内容，但是渲染出来结果不同：

另外一个区别：
2、使用v-text可以避免在网络环境较差的情况下避免插值闪烁
什么意思呢？举个例子：

当网速较慢时，看效果：

这是刚进入网页的效果：

过了两三秒后：

v-text中也可以调用表达式！

b、v-html

举个例子：

效果：

如果是v-html：