一、Vue是什么
一套用于构建用户界面的渐进式JavaScript框架。
渐进式:Vue可以自底向上逐层的应用,对于简单的应用可以使用轻量小巧的核心库;对于复杂的应用可以使用各种各样的Vue插件。
二、Vue的特点
1.采用组件化模式,提高代码复用率,且让代码更好的维护;
2.声明式编码,让编码人员无需直接操作DOM,提高开发效率;
3.使用虚拟DOM+Diff算法,尽量复用DOM节点。
三、搭建Vue开发环境
方式一:<script>标签引入
引入vue时,全局多了一个名为Vue的构造函数
<head>
<meta charset="UTF-8">
<title>初试vue</title>
<!--引入vue-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
引入后需要在浏览器安装vue调试工具,浏览器不同安装的工具不同,安装教程点击vue调试工具vue-devtools安装及使用(亲测有效,望采纳) 最后付上(Vue.js is detected on this page的解决方法) - ____chen - 博客园vue调试工具vue-devtools安装及使用(亲测有效,望采纳) 最后付上(Vue.js is detected on this page的解决方法) 本文主要介绍 vue的调试工具 vhttps://www.cnblogs.com/chenhuichao/p/11039427.html引入了Vue的开发版本,vue启动时会生成生产提示;
解决方案如下:
<body>
<script type="text/javascript">
Vue.config.productionTip = false;
</script>
</body>
四、入门案例
<!DOCTYPE html>
<html>
<!--
小结:
1.想让vue工作,就必须先创建一个vue实例,且要传入一个配置对象;
2.root容器里的代码仍然符合html规范,只不过混入了一些特殊的vue语法;
3.root容器里的代码被称为【Vue模板】
4.vue容器和实例是一一对应的;
5.真实开发中只有一个vue实例,且会配合着组件使用;
6.一旦date中的数据发生改变,那么页面中的用到该数据的地方也会自动更新;
7.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到date中的所有属性。
-->
<head>
<meta charset="UTF-8">
<title>初试vue</title>
<!--引入vue-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h1>hello,{{name}}</h1>
<h1>{{age}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//创建vue实例
new Vue({
//也可写成 el:document.getElementById('root')
el:'#root',//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串
data:{ //date中用于存储数据,数据供el所指定的容器使用,值我们暂时先写成一个对象。
name:'sunyuan',
age:18
}
});
</script>
</body>
</html>