如何正确使用Vue.js的组件

JavaScript020

如何正确使用Vue.js的组件,第1张

# 下载最新的vue

$ npm install vue

js 引用 vue.js

开始代码，感受vue强大的双向数据绑定

<div id="app">

<p>{{ message }}</p>

<input v-model="message">

</div>

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

}

})

实战代码：

<div id="app">

<input v-model="newTodo" v-on:keyup.enter="addTodo">

<ul>

<li v-for="todo in todos">

<span>{{ todo.text }}</span>

<button v-on:click="removeTodo($index)">X</button>

</li>

</ul>

</div>

new Vue({

el: '#app',

data: {

newTodo: '',

todos: [

{ text: 'Add some todos' }

]

},

methods: {

addTodo: function () {

var text = this.newTodo.trim()

if (text) {

this.todos.push({ text: text })

this.newTodo = ''

}

},

removeTodo: function (index) {

this.todos.splice(index, 1)

}

}

})

Vue整个生命周期示意图：

要引入vue.js，可以通过在script的src属性中写一个网址来导入在线的vue.js文件。使用在Vue.js的官网上直接下载vue.js文件到本地通过在script的src属性中写一个网址来导入在线的vue.js文件。

简单方式

vue init webpack-simple 工程名字

npm install vue-router vue-resource --save

npm run dev

Vue推荐开发环境

Node.js 6.2.0、npm 3.8.9、webpack 1.13、vue-cli 2.5.1、webstrom2016

现在开始安装环境

安装nodejs

可以在终端里下载，但是不推荐，npm的版本会报错

去nodejs官网下载即可，地址：http://nodejs.cn/中文网

安装vue淘宝镜像

npm install -g vue –registry=https://registry.npm.taobao.org

安装webpack

npm install webpack -g

安装vue脚手架

npm install vue-cli -g

—————-如果第二次编写新的vue项目，就可以在这里开始了—————–

根据模板创建项目

vue init webpack 项目名字<项目名字不能用中文>

会有一些初始化的设置，如下输入:

Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)

Project name (vue-test) 直接回车默认

Project description (A Vue.js project) 直接回车默认

Author 直接回车默认

Use ESLint to lint your code? n

pick an eslint preset. 默认Standard

setup unit tests with karma + mocha?No(单元测试不需要)

setup e2e tests with Nightwatch?No(单元测试不需要)

进入项目

打开终端

cd 项目名字

安装项目依赖

npm install

安装 vue 路由模块vue-router和网络请求模块vue-resource –save-dev 是你开发时候依赖的东西，–save 是你发布之后还依赖的东西

npm install vue-router vue-resource –save

启动项目

npm run dev

发布项目

npm run build