vuejs开发入门之工具安装和常用指令

1.安装命令行工具

使用npm或者cnpm进行安装

npm安装速度比较慢

安装：npm install -g vue-cli

创建一个基于webpack模板的项目

vue init webpack 项目名称

安装依赖

cd 项目目录

npm install

npm run dev

cnpm安装速度快一些

下载地址：http://npm.taobao.org/

安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装：cnpm install -g vue-cli

创建一个基于webpack模板的项目

vue init webpack 项目名称

安装依赖

cd 项目目录

cnpm install

cnpm run dev

2.vue的工程化处理 vuejs的一个组件

文件名：*.vue

包含内容

<template>

HTML的模板代码

</template>

<style>

css样式表定义的位置

</style>

<script>

js脚本

</script>

3.数据渲染 html页面

v-text

v-html

{{}}

4.判断数据是否显示

v-if

v-show

5.数组或者对象数据渲染

v-for='临时变量 in 数组或者对象'

6.事件绑定

v-on

例如v-on:click 等价于 @click

7.模板属性的动态绑定 v-bind:属性=‘存储属性的变量’

v-bind:class 等价于 ：class

8.vue对象的属性

el：元素

data： 对象中的数据

methods：绑定的事件方法

watch：事件监听的方法

9.引入模板信息

import App from './App【.vue】'

var App=require(./App);

10.v-model 数据双向的绑定

常用在

input

textarea