1.Vue是什么?
1.Vue是一套用于构建用户界面的渐进式JavaScript框架。
2.构建用户界面:把数据构建成用户可以看见的界面。
3.前端工程师:在合适的时候,发出合适的请求,最后把数据展示到合适的位置。
4.vue关注的是怎么把数据变成用户界面。
5.渐进式:Vue可以自底向上逐层的应用。
简单应用:只需呀一个轻量小巧的核心库。
复杂应用:可以引入各式各样的Vue插件库。
2.谁开发的?
—尤雨溪
2013年收到Angular启发,也参考了React。
3.Vue的特点
1.采用组件化模式,提高代码复用率,且让代码更好维护。
组件化: 一个Vue实现一块界面,一个Vue里面由html,css,js的交互。一个Vue就是一个组件。
2.声明式编码,让编码人员无需直接操作DOM,提高开发效率。
声明式更简单,更智能。之前的html和js基础内容都是命令式编码,代码很长很机械。
3.使用虚拟DOM+优先的Diff算法,尽量复用DOM节点。
-虚拟DOM就是内存里面的数据。
-Diff算法,将原始虚拟DOM和新的虚拟DOM中的数据做一个比较,一样的数据复用,新的数据加进来。
4.学习Vue之前需要掌握的JavaScript基础知识?
ES6语法规范、ES6模块化、包管理器npm、原型和原型链、数组常用方法、axios、promise
4.初识Vue
1.在官网下载vue.js
2.创建一个html,引入vue.js文件:<script src="../js/vue.js"></script>
3.引入文件后,多了一个内置的Vue构造函数/对象。
4.如何验证是vue构造函数?
1)执行html,在console中出现两个提示:
Download the Vue Devtools extension for a better development experience: 请你下载一个vue开发者工具,达到一个更好的开发体验。
https://github.com/vuejs/vue-devtools
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.你正在运行一个开发版本的vue,请你确定,你在生产环境下不要这样做。
See more tips at https://vuejs.org/guide/deployment.html
2)在console中输入Vue,出现一个函数:
ƒ Vue(options) {
if (!(this instanceof Vue)) {
warn$2('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}
3)在console中输入Vue.config
,得到一个对象,里面所有的东西都是对vue进行一个全局的配置,一次修改,到处都可用。
productionTip: true 生产提示,如果改为false就阻止vue在启动时生成的生产提示。
在html的script中,写一行代码:`Vue.config.productionTip = false;`
4)如果仍不能消除提示,可以在不删除上面Vue.config.productionTip = false;
代码的基础上将生产版本的Vue和开发版本的Vue都引入进来,记住开发版本的Vue要写在下面。
<!-- 引入生产版本的Vue-->
<script type="text/javascript" src="../js/vue.min.js"></script>
<!-- 引入开发版本的Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
--这样既可以保证不出现提示,也可以用Vue检查出自己写的错误代码。
5.错误点
1.Vue.js插件中点击Root无反应。
1.原因:Vue.js devtools对于纯中文数据的兼容性不是很好,所以会出现点击无任何反应的情况。
2.解决:如果数据中有纯中文的数据,在纯中文的数据中加入字母或者干脆输入非中文数据,重新打开实例网页即可解决问题。
3.例子:Vue实例中,之前是name:‘尚硅谷’,改为name:‘尚硅谷atGuiGu’
<!-- 准备号一个容器 -->
<div id="root">
<!-- 普通写法 -->
<!-- 单向数据绑定:<input type="text" v-bind:value="name"><br>
双向数据绑定:<input type="text" v-model:value="name"><br> -->
<!-- 简写 -->
单向数据绑定:<input type="text" :value="name"><br>
双向数据绑定:<input type="text" v-model="name"><br>
<h2 v-bind:x="name">你好啊</h2>
<!-- <h2 v-model:x="name">你好啊!</h2> 代码错误-->
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
name:'尚硅谷atGuiGu'
}
});
</script>