vue.js 入门基础

准备知识:

1、前端开发基础 html、css、js;

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、

1.jpg

3、

2.jpg

以上就是vue.js 入门基础的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » Vue.js 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏