前端框架Vue-认识
1.认识Vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以期轻量易用著称，vue.js和React.js发展速度最快，AngularJS还是老大。
参考：https://cn.vuejs.org/v2/guide/
作者
尤雨溪，Vue.js 创作者，Vue Technology创始人，致力于Vue的研究开发。
2.Node和NPM
NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。
2.1.下载Node.js
下载地址：https://nodejs.org/en/download/
推荐下载LTS版本，LTS是延长支持版本。具体看喜欢。
下载完成之后，直接安装，你是什么系统，就选择对应系统版本的node.js软件即可
安装完成之后，在CMD命令上打
node -v
如果能看到版本信息，则表示node 安装成功！
2.2.NPM
安装完成Node应该自带了NPM了，在控制台输入npm -v查看：
npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm
我们首先安装nrm，这里-g代表全局安装
npm install nrm -g
问题：
如果过装不上nrm
就可能是源的问题，就先设置npm的源
npm config set registry https://registry.npm.taobao.org
之后充值安装npm
npm install nrm -g
解决方法：
找到目标所在路径的js
将
const NRMRC = path.join(process.env.HOME, '.nrmrc');
修改成
const NRMRC = path.join(process.env.USERPROFILE, '.nrmrc');
npm config set registry https://registry.npm.taobao.org 等价于 nrm use taobao
然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：
通过nrm use taobao来指定要使用的镜像源：
然后通过nrm test npm 来测试速度：
3.快速入门
使用方式两种
- 下载好vuejs，然后引入
- 使用npm 初始话，直接生成js，然后引入
也可以直接使用公共的CDN服务：
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
初始化方式
CMD进入到项目路径
npm init -y 进行初始化
初始化，之后会多出一个package.json文件
安装Vue，输入命令：npm install vue --save
发现一个node_modules目录，并且在下面有一个vue目录。
目录结构
- dist 编译之后的文件
- src 源码
node_modules是通过npm安装的所有模块的默认位置。
3.3.vue入门案例
3.3.1.编写一个HTML 并通过Vue进行渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue-test">
<h1>你好，{{name}}</h1> // {{name}}插值表达式 <span v-text="name"></span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//生成一个vue实例
var test_vue = new Vue({
el:"#vue-test", //el 表示element缩写，就是需要渲染的元素id
data:{
name:"caicai"
}
})
</script>
</body>
</html>
-
首先通过 new Vue()来创建Vue实例
-
然后构造函数接收一个对象，对象中有一些属性：
- el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
- name：这里我们指定了一个name属性
-
页面中的
h1元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。 -
当你修改name属性时，页面会跟着变化
3.3.2.双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue-test">
<input type="text" v-model="number"/>
<h1>你好，{{number}}
</h1>
有{{number}} 来过这里，留下足迹！
<hr>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//生成一个vue实例
var test_vue = new Vue({
el:"#vue-test", //el 表示element缩写，就是需要渲染的元素id
data:{ //数据
name:"caicai",
number:1,
}
})
</script>
</body>
</html>
-
我们在data添加了新的属性：
number -
在页面中有一个
input元素，通过v-model与number进行绑定。 -
同时通过
{{number}}在页面输出
可以观察到，输入框的变化引起了data中的number的变化，同时页面输出也跟着变化。
- input与number绑定，input的value值变化，影响到了data中的number值
- 页面
{{number}}与数据number绑定，因此number值变化，引起了页面效果变化。
没有任何dom操作，这就是双向绑定的魅力。
3.3.3.事件处理
我们在页面添加一个按钮：
<button v-on:click="number++">点我</button> //v-on:click 可以写成@click简写 click内容可以写js语法
- 这里用
v-on指令绑定点击事件，而不是普通的onclick，然后直接操作number - 普通click是无法直接操作number的。
