Vue和Webpack使用

1、 vue.js研究-入门程序

1)编写html,引入vue.min.js (vue.js的类库)
2)编写视图部分的代码(用户界面,只负责展示)
3)编写VM (viewModel )及其中Model
4)刷新页面运行程序, vue.js(VM)部分实现将model中的数据在view中展示

2、vue.js研究-常用指令

1. v-model实现双向数据绑定:
   a、由模型数据绑定到Dom对象,模型数据的值改变, Dom对象的值自动改变
   b.由Dom对象绑定到模型数据, Dom对象的值改变,模型数据就改变
2. v-textv-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题
3. v-on监听用户事件
4. v-bindv-bind可以将数据对象绑定在dom的任意属性中。
   v-bind可以给dom对象绑定一个或多个特性,例如动态绑定style和class
5. v-if和v-for
   v-for可以循环遍历数组、v-if进行判断
   Vue.js使用

3、安装webpack

1. webpack依赖node.js ,首先安装node.js
   2)安装npm
   npm全称Node Package Manager ,他是node包管理和分发的工具。node.js使用npm安装我们所依赖的js包。
   通过npm安装webpack。
   npm的工作原理:去远程下载所依赖的js包。
2. 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 [email protected]或cnpm install [email protected]

本地安装:

cnpm install--save-dev [email protected]或npm install-save-dev [email protected]

Webpack使用