vue里面的el只能绑定id吗_VUE初级教程详解

1.Vue

早期的前端页面是利用 html + css + js 来实现功能

后期出现了两个方向的变革：

其中一个方向是页面效果的封装：html + css - bootstrap - zui，layui...

另一个方向是js的封装：js - jq - bootstrap - zui，layui

在js封装的时候，现在发现我们js主要业务还是逻辑为主 还要加上dom的操作

逻辑没办法减少只能自己自行封装，而dom操作则可以作为封装

所以现在最新的js框架就出来了

最早出现的js框架(封装dom操作)是 Angular - google

因为angular对于中国人体验并不好，学习成本也很高，所以只有一些对接国外业务的公司

使用angular作为前端框架

而国内更多的使用vue和react框架作为前端框架来使用

我们的微信小程序和uni-app都是基于vue来进行开发的，所以vue是我们作为

后端开发人员需要熟悉的知识体系之一

2.Vue的种类：

VueJS ：推荐零基础的学员开始步入学习的台阶

VueCli：企业开发的框架(脚手架)

3.VueJS:

第一个页面：

{{ message }}

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

4.{{ message }}表达式的使用

{{ message }} -- 展示data的内容信息

{{ 1 + 1 }} -- 进行运算

{{ "hello" }} -- 输出字符串

{{ 1 == 1 }} -- 判断表达式

{{ "百度" }}

-- 转换成链接(默认不会去解析带有违禁字符的字符串)

表达式的bug：

当我们快速刷新网页的时候会出现表达式的源码

会影响客户的体验

5.vue的属性：

v-html： 将内容显示到元素的html中，原理：使用innerHTML设置值，自然不适合输入框

v-bind:自带属性 将某些vue的值设置给对应元素自带的属性中

例如：

v-bind 有他的缩写形式： 只要写 :自带属性 即可：

例如：

v-on:自带事件名称 设置某个元素的事件

例如：

点我呀

js部分：

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!',

test: 'Hello' // 这里可以设置标签元素，因为内部就是调用了innerHTML来设置html的值

},

methods: {

clickMe : function() {

alert('被点了...')

}

}

})

注意：

clickMe : function() {

// this：整个vue的对象，所以我们推荐监听的方法不要用js的写法，可以很容易获得data的内容信息

alert('被点了...' + this.message)

// 在监听中将data的参数值修改了，那么整个界面有使用到这个属性的信息都进行修改

this.message = "班长聪明"

}

v-on 有他的缩写形式： @自带事件名称

v-model: 双向数据绑定

如果一个框架和你说是单向绑定就意味着：

如果属性发生改变，那么对应ui的值也会发生改变

如果一个框架和你说是双向绑定就意味着：

如果属性发生改变，那么对应ui的值也会发生改变

如果ui的值发生改变，那么对应的属性也会改变

实现：

这个双向数据绑定英文：MVVM

当数据渲染成功后，UI展示出来之后，我们VUE会将ui的数据信息全部保存到系统内存中

当用户去操作任何UI的时候，VUE会将操作之后的信息和内容中的信息进行比对

如果不一致，就修改属性

之后将修改好的UI信息再次保存到内存中

这里的内存(前端叫做：虚拟dom)

也就是说内存中有一个虚拟环境，保存了页面的信息 - vm

v-if

v-show

这两个自定义属性都是用来隐藏和显示UI元素的，但是机制是不同的

v-if是采用将UI元素移除，那么效率肯定比较低，推荐是在切换比较少的页面使用

v-show是采用css的display来将UI元素隐藏，效率肯定比较高，推荐是在经常切换页面的UI中使用

v-for：

在data中设置参数：

array: ["福建", "湖北", "四川", "浙江"]

接下来设置ui部分：

6.生命周期：

1.beforeCreate：

vue第一个生命周期函数，当时间和生命周期开始初始化完成调用此方法

2.created

vue第二个生命周期函数，当页面被初始化成功后调用

这个生命周期很关键！！！

3.beforeMount：

vue第三个生命周期函数，当vue的根元素被加载之前调用

4.mounted：

vue第四个生命周期函数，当vue的虚拟dom加载完毕并且页面渲染完成后执行此方法

这个生命周期很关键！！！

5.beforeUpdate：

vue第五个生命周期函数，当vue的数据被进行修改

6.updated：

vue第六个生命周期函数，当vue的数据被修改成功后调用此方法

7.beforeDestory：

vue第七个生命周期函数，当vue的调用摧毁虚拟dom方法的时候触发

8.destoryed:

vue第八个生命周期函数，当vue被完全从内存中清除后调用此方法