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 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

Webpack使用

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,233评论 0 21
  • 1、webpack入门 Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模...
    余生安好178阅读 1,102评论 0 2
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,112评论 0 2
  • 本篇主要介绍三块知识点: node.js vue.js webpack前端工程化 本篇不是写给零基础的同学看的,读...
    3hours阅读 1,401评论 0 0
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,740评论 1 52