准备知识:
2, 前端 模块化 基础;
3, 对 ES6 有初步的了解
初步了解 vue.js 框架
1,vue.JS 是一种轻量级的 MVVM 前端框架;
2, 同时吸收了 React 和 Angular 的优点:
它强调了 React 组件化的概念, 可以轻松的实现数据的展现和分离
它也吸收了 Angular 灵活的指令和页面操作的一些方法
vue.JS 开发环境的搭建
1, 推荐使用 vuejs 官方提供的命令行工具
实现效果: 可以直接在命令行中使用 vue 命令;
NPM 工具在国内网络环境下很慢, 推荐使用 淘宝的 NPM 镜像;
将 cnpm 安装到系统中:
$ NPM install -g cnpm --registry=https://registry.npm.taobao.org;
安装 vue-cli:
$ cnmp install -global vue-cli
-global 代表全局安装, 使用之后便可安装到系统的 node 目录下, 继而使用 vue 命令, 不使用则只能在当前目录使用.
2, 初始化 vue 项目步骤:
cd 目录『你要把项目放在哪个目录』;
vue init webpack {project_name};
webpack, 为项目类型, 使用 webpack 模板, 并且使用 webpack 这个工具进行压缩和打包
? Project name {project_name};
? Project description (A Vue.JS project) - 「项目描述」
? Author - 「项目作者」
? Vue build: 这里选择 Runtime + Compiler: recommended for most users
- > Runtime + Compiler: recommended for most users
- Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are
- ONLY allowed in
- ? Install vue-router? (Y/n) Yes; - [vue-router]
? Use ESLint to lint your code? (Y/n) Yes; - [ESLint 是一个语法检查工具]
? Pick an ESLint preset (Use arrow keys): 这里选择 Standard
- > Standard (https://github.com/feross/standard)
- Airbnb (https://github.com/airbnb/javascript) none (configure it yourself)
? Setup unit tests with Karma + Mocha? (Y/n) No; - [单元测试]
Setup e2e tests with Nightwatch? (Y/n) No; - [单元测试]
? Should we run 'npm install' for you after the project has been created
?(recommended) (use arrow keys): 这里选择 Yes, use NPM
- > Yes, use NPM
- Yes, use Yarn
- No, I will handle that myself
- cd {
- project_name
- }
NPM run dev; - [本地运行项目]
脚手架工具的使用
1,vue.JS 组件的重要选项
- new Vue({
- data: {
- a: 1,
- b: []
- },
- methods: {
- doSomething: function(){
- // console.log(this.a);
- this.a ++;
- }
- },
- // 监听
- watch: {
- 'a': function(val, oldVal){
- console.log(val, oldVal);
- }
- }})
2, 模板指令 - [HTML 和 vue 对象的粘合剂]
数据渲染: v-text,v-HTML,{{}} 这三种方式并不等价
- <p>
- {{ a }}
- </p>
- <p v-text="a">
- </p>
- <p v-HTML="a">
- </p>
控制模块隐藏: v-if,v-show
v-if 直接不渲染这个 DOM 元素, 而 v-show 是通过 CSS 的 display: none 来对它进行隐藏
- <p v-if="isShow"></p>
- <p v-show="isShow"></p>
- new Vue({
- data: {
- isShow: true
- }})
渲染循环列表: v-for
- <ul>
- <li v-for="item in items">
- <p v-text="item.label"></p></li></ul>new Vue({data: {
- items: [
- {
- label: 'apple'
- },
- {
- label: 'banana'
- }
- ]}})
事件绑定: v-on
- <button v-on:click="doThis"></button>
- <button @click="doThis"></button>
- new Vue({
- methods: {
- doThis: function(someThing){
- }
- }})
属性绑定: v-bind
- <img v-bind:src="imageSrc">
- <div :class="{ red: isRed }">
- </div>
- <div :class="[classA, classB]">
- </div>
- <div :class="[classA, { classB: isB, classC: isC }]">
- </div>
3, 小结
new 一个 vue 对象的时候你可以设置它的属性, 其中最重要的包括三个, 分别是 data,methods,watch.
其中 data 代表 vue 对象的数据, methods 代表 vue 对象的方法, watch 设置了对象监听的方法
vue 对象里的设置通过 HTML 指令进行关联
vue.JS 具体的指令和项目实践
Vuejs 中的组件
1, 如何区分组件
功能模块 - [select, pagenation]
页面区域 - [header, footer, sidebar]
2, 组件之间的调用 - [components]
- import Header from './header'
- import Footer from './footer'
- new Vue({
- components: {
- Header, Footer }})
- <header></header>
- <footer></footer>
3, 组件之间的通信 - [props]
- // this is header.vue
- new Vue({
- props: ['msg'],})
- <!-- this is app.vue -->
- <header msg="something interesting"></header>
- <footer></footer>
补充
1, 本地存储的利用
赋值: localStorage.setItem('key', 'value')
取值: localStorage.getItem('key')
2,
3,
来源: http://www.css88.com/web/vue-js/11161.html