准备知识:
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、
3、
更多web前端相关知识，请查阅 HTML中文网 ！！
以上就是vue.js 入门基础的详细内容，更多请关注0133技术站其它相关文章！
