自学vue第一天

nvm 是 node的版本管理工具

什么是node ？

脚本语言需要解析器才能运行，JavaScript是脚本语言。写入html的js语言，浏览器是它的解析器角色。而对于需要独立运行的JS，nodejs就是一个解析器。

每一种解析器都是一个运行环境。在Node.js的帮助下，开发人员可以使用JavaScript进行后端开发，同时，Node.js还提供了丰富的模块库。

vue

前言

首先需要了解Vue的渲染逻辑：
将模板template解析成AST(抽象语法树)； 再将AST转化为Render函数；
通过Watcher监听数据的变化； 当数据发生变化时，Render函数执行生成虚拟VNode节点，该节点包含创建DOM节点所需信息；
通过patch方法，对比新旧VNode对象，通过DOM diff算法，添加、修改、删除真实DOM节点。
Vue中指令都是带有v-的特殊属性，这些指令主要是用来控制DOM元素的行为，例如最简单的显示、隐藏。

vue开发者工具（vue devtool），是一个谷歌插件，可以在https://chrome.zzzmh.cn/info/nhdogjmejiglipccpnnnanhbledajbpd下载，然后加载安装到谷歌浏览器即可

vue指令

实质就是带有v-前缀的特殊属性，不同属性对应不同的功能

常用的vue指令

v-html

<p v-html="msg"></p>

会将其属性值当作HTML标签进行解析后输出
v-text

<p v-text="msg"></p>

输出的是变量的纯文本，不会对文本内容进行解析

注：v-html 指令应尽量避免使用，否则会带来危险(XSS攻击 跨站脚本攻击),一般只在可信任内容上使用
v-html，永不用在用户提交的内容上

v-show

v-show和v-if 都可以控制dom元素的显示和“隐藏”

区别：

v-show
给绑定的DOM元素添加CSS样式：display:none，但是DOM元素仍然存在
v-if
将DOM元素整个删除，此时DOM元素不再存在

v-if 涉及到组件的创建与销毁，所以有很高的切换消耗，但是v-show 有更高的初始渲染消耗（当v-if的初始判断为否时）

v-if v-else v-else-if

<p v-if="expression">{content1}</p>
<p v-else-if="expression2">{content2}</p>
<p v-else>{content3}</p>

v-on 事件绑定回调指令
注册事件= 添加监听 + 提供处理逻辑

##内敛语句
<button @click="count++"></button> ##简写形式
<button v-on:click="count++"></button>
##处理函数
<button @click="fn"></button>

const app = new Vue({
  el: '#app',
  data:{
    count: 100
  },
  methods:{
  	fn () {
  		count++
		console.log('hello wolrd')
	}
  }

})

v-bind
动态的设置HTML的标签属性 -> src url title …

<img v-bind:src="url">

const app = new Vue({
  el: '#app',
  data:{
    url: "http..."
  }
})

v-for
基于数据循环，多次渲染整个元素 -> 数组、对象、数字…

<p v-for="(item,index) in list" :key="item.key">
 ## item对应数组中的一项数据，index对应索引的下标
 ## 其他处理。嵌套
</p>

v-for 中的key 用于给元素添加唯一标识，防止当对数据进行修改的时候，因索引而造成的渲染错误

v-model
数据的双向绑定，给表单元素使用
数据变化 <->视图更新

v-bind 监听到数据变化的时候，视图会更新 ，单向的