1、 vue.js研究-入门程序
1)编写html,引入vue.min.js (vue.js的类库)
2)编写视图部分的代码(用户界面,只负责展示)
3)编写VM (viewModel )及其中Model
4)刷新页面运行程序, vue.js(VM)部分实现将model中的数据在view中展示
2、vue.js研究-常用指令
- v-model实现双向数据绑定:
a、由模型数据绑定到Dom对象,模型数据的值改变, Dom对象的值自动改变
b.由Dom对象绑定到模型数据, Dom对象的值改变,模型数据就改变 - v-textv-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题
- v-on监听用户事件
- v-bindv-bind可以将数据对象绑定在dom的任意属性中。
v-bind可以给dom对象绑定一个或多个特性,例如动态绑定style和class - v-if和v-for
v-for可以循环遍历数组、v-if进行判断
Vue.js使用
3、安装webpack
- webpack依赖node.js ,首先安装node.js
2)安装npm
npm全称Node Package Manager ,他是node包管理和分发的工具。node.js使用npm安装我们所依赖的js包。
通过npm安装webpack。
npm的工作原理:去远程下载所依赖的js包。 - cnpm代替了npm ,可以从国内的镜像下载js包
如果没有连网使用老师提供的npm-modules.zip,解压到npm-modules目录的位置(前边设置了 npm-modules的目录在nodejs安装目录下)
4)安装webpack
本地安装:
将webpack安装到指定应用程序的目录下进入这个目录,
执行
npm install-save-dev webpack或cnpm install--save-dev webpacl
全局安装:
将webpack安装npm默认的依赖包的目录(前边配置在了nodejs的安装目录下)在任意目录,
执行
npm install-g webpack或cnpm install-g webpack
建议指定webpack的版本进行安装全局安装:
npm install webpack@3.6.0-g或cnpm install webpack@3.6.0-g
本地安装:
cnpm install--save-dev webpack@3.6.0或npm install-save-dev webpack@3.6.0
