vue的基础

一、vue基础

1. 什么是vue

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

说明

1. 构建用户界面：用vue往html页面中填充数据，非常的方便
2. 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
3. 要学习vue，就是在学习vue框架中规定的用法！
4. vue 的指令、组件（是对UI结构的复用）、路由、Vuex、vue组件库

2. vue的开发者

3. vue的特点

• 采用组件化模式，提高代码的复用率，且让代码更好的维护

• 声明式编码，让编码人员无需直接操作DOM，提高开发效率

需求：渲染的效果

实现的命令

• 使用虚拟DOM + 优秀的Diff算法，尽量复用DOM节点

需求：渲染的效果

页面的修改：原始、生js实现

页面的修改：vue实现

二、vue 的调试工具

1. 安装 vue-devtools 调试工具

• vue官方提供的vue-devtools调试工具，能够方便开发者对vue项目进行调试与开发。

链接：https://pan.baidu.com/s/1yJnnnqURf9rR51c5LAaVMw 提取码：1115

2、配置Chrome浏览器中的vue-devtools

Chrome浏览器安装方式

    1. 点击右上角三个点
    2. 点击更多工具
    3. 点击扩展程序
    4. 点击右上角的开发者模式，将他启用
    5. 将下载的Vue.crx文件直接拖动到浏览器窗口即可

Edge浏览器安装方式

    1. 点击浏览器右上角的三个点
    2. 点击扩展
    3. 点击左下角的开发人员模式，将他启用
    4. 将Vue.crx文件拖动到浏览器即可

Chrome的安装如下所是

三、搭建Vue开发环境

• vue中文文档：https://v2.cn.vuejs.org/

1. 环境的搭建

2. 基础代码的实现

2.1 引入vue.js代码

• 创建一个js文件夹，将下载的文件放入js文件夹中
• 每次创建文件要引入vue.js

    <script src="../js/vue.js"></script>

2.2 解决运行时，控制台会有提示信息

• Vue.config 是一个对象，包含 Vue 的全局配置
• productionTip设置为 false 以阻止vue在启动时生成生产提示。

    <div id="root">
        <h1>hello world</h1>
    </div>
    <script>
        //阻止vue在启动时生成生产提示。
        Vue.config.productionTip = false 
    </script>

• 但依旧没有解决

如果方法一行不通，可以根据方法二解决

• 我们可以直接打开vue.js文件，进入vue.js源代码进行修改,通过Ctrl + f查找productionTip,将true改为false

3. 小案例

	<!-- 准备好一个容器 -->
	<div id="app">
		<h1>Hello，{{name}}</h1>
	</div>
	<script>
		//  ({{}}) 为配置对象，key不能变，是规定的
		//创建Vue实例  
		new Vue({
			//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
			// el: '#app', 相当于 el: document.getElementById('app')
			el: '#app',   // el是element的简称
			//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
			data: {
				name: 'Tom',
			}
		})
	</script>

• 小总结

    1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
    2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
    3. root容器里的代码被称为【Vue模板】；
    4. Vue实例和容器是一一对应的；
    5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
    6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
    7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

两个容器对应一个对象时

	<div id="app">
		<h1>Hello，{{name}}1</h1>
	</div>
	<div id="app">
		<h1>Hello，{{name}}2</h1>
	</div>
	<script>
		//  ({{}}) 为配置对象，key不能变，是规定的
		//创建Vue实例  
		new Vue({
			//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
			// el: '#app', 相当于 el: document.getElementById('app')
			el: '#app',   // el是element的简称
			//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
			data: {
				name: 'Tom',
			}
		})
	</script>

一个容器对应两个对象时

	<div id="app">
		<h1>Hello，{{name}} {{method}}</h1>
	</div>

	<script>
		//创建Vue实例  
		new Vue({
			el: '#app',
			data: {
				name: 'Tom',
			}
		})
		new Vue({
			el: '#app',
			data: {
				method: '早上好',
			}
		})
	</script>

• 总结使用vue中一个容器对应一个实例

4. 注意区分：js表达式和js代码(语句)

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

    (1). a <br>
    (2). a+b  <br>
    (3). demo(1)  <br>
    (4). x === y ? 'a' : 'b'  <br>

2.js代码(语句)

    (1). if(){}  <br>
    (2). for(){}  <br>

5. 开发模式和生成模式的区别

• 当我们在构建vue实例的时候，删除new时，开发模式和生成模式的区别

开发模式

<script src="../js/vue.js"></script>

生成模式

<script src="../js/vue.min.js"></script>

四、配置vue2的代码片段

• 点击vscode的设置

• 新建全局代码判断，随便输入名字即可

• 配置代码片段

	"Print to console": {
		"scope": "javascript,typescript,html",
		"prefix": "vue2",
		"body": [
			"<div id=\"app\">",
			"</div>",
			"<script>",
				"new Vue({",
					"el:\"#app\",",
					"data() {",
						"return {",
						"}",
					"},",
				"})",
			"</script>"
		],
		"description": "Log output to console"
	}