Vue入门
Posted 爱上口袋的天空
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue入门相关的知识，希望对你有一定的参考价值。
目录
Vue是什么
Vue是一套动态构建用户界面的渐进式 javascript 框架
Vue的特点
- 采用组件化模式，提高代码复用率、且让代码更好维护。
- 声明式编码，让编码人员无需直接操作DOM，提高开发效率
例如我们现在要实现一个功能：把一些数据放入容器中
- 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
例如现在我们要往容器中添加新的数据，如果使用原生js的办法：
它会重新遍历然后全部重新添加一遍，这样会降低代码的效率，而如果使用Vue就可以完美的避免这个问题：
- 注意：如果数据不会发生变化那么这个虚拟DOM不会有什么实际的帮助。
- 过程：在数据发生变化的时候Vue会使用Diff算法对新数据和老数据进行对比，如果有一部分数据没有发生变化，那么Vue会对其进行复用。
搭建Vue使用环境
①在Vue的官网https://cn.vuejs.org/进行开发版本的下载（文件比生产版本要大，里面包含了多种提示）
https://cn.vuejs.org/v2/guide/installation.html
②在文件中引入，这里有很多种方式脚手架(CLI)，NPM，我们先不涉及，使用最简单的script引入
Hello初识案例
我们直接通过代码来理解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../VueEnvironment/vue.js"></script>
</head>
<body>
<div id="root">
<h1>Hello.name</h1>
</div>
<script>
Vue.config.productionTip=false //阻止 vue 在启动时生成生产提示
new Vue(
el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
//el:document.getElementById('root'); 也可以这么写
data: //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'CSDN'
)
</script>
</body>
</html>
显示效果：
初识Vue：
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
- root容器(也就是代码中的div)里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
- root容器里的代码被称为【Vue模板】；
- Vue实例和容器是一一对应的；(多对一，一对多均错误)
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
- xxx中的xxx要写js表达式(也就是会返回一个值的语句)，且xxx可以自动读取到data中的所有属性；
- 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
以上是关于Vue入门的主要内容，如果未能解决你的问题，请参考以下文章