vue.js基础demo

Vue.js

定义：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合

Vue.js 目标

通过尽可能简单的 API 实现响应的数据绑定和组合的视图组

目录结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	包含了几个目录及文件：   assets: 放置一些图片，如logo等。     components: 目录里面放了一个组件文件，可以不用。     App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。     main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式
参考资料： [4]

 

 

 

 

Vue.js教程

Demo1:

d="app">

  

{{ message }}

 

Vue.js安装

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 

//script引入

  

{{ message }}

 

 

 

NPM方法：

#查看版本

$ npm -v

#升级

cnpm install npm -g

#升级或安装

cnpm install cnpm -g

$cnpm install vue(用vue.js构建大型应用时使用)

命令行工具

#全局安装 vue-cli

$ cnpm install --global vue-cli

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

$vue init webpack my-project

#配置，默认回车

This will install Vue 2.x version of the template.

For Vue 1.x use:vue init webpack#1.0 my-project

? Project name my-project

? Project description A Vue.js project

? Author runoob

? Vue build standalone? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

To get started:

  cd my-project

     npm install

     npm run dev

   

进入项目，安装并运行：

$ cd my-project

$ cnpm install

$ cnpm run dev

 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

  {{ message }} {{name}}

 

 

 

 

### 安装 `npm`

`npm` 全称为 `Node Package Manager`，是一个基于`Node.js`的包管理器，也是整个`Node.js`社区最流行、支持的第三方模块最多的包管理器。

```

npm -v

```

 

### 由于网络原因 安装 `cnpm`

```

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

```

 

### 安装 `vue-cli`

```

cnpm install -g @vue/cli

```

 

### 安装 `webpack`

`webpack` 是  `JavaScript` 打包器(module bundler)

```

cnpm install -g webpack

```

{{msg}}

{{msg}}

Using mustaches: {{ rawHtml }}

v-html="rawHtml">

v-bind:class="color">test...

{{ number + 1 }}

{{ 1 == 1 ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

v-if="seen">现在你看到我了

v-bind:href="url">...

click me

class="test"

v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']"

style="width:200px; height:200px; text-align:center; line-height:200px;">

hi vue

 

:style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">

hi vue

 v-if="type === 'A'">

  A

 v-else-if="type === 'B'">

  B

  C

  Not A/B/C

 v-show="ok">Hello!

• key="index">

  {{index+1}}{{ item.message }}

• {{key}} : {{ value }}

v-on:click="counter += 1"> 数值 :  {{ counter }}

v-on:dblclick="greet('abc', $event)">Greet

v-model="message" placeholder="edit me">

Message is: {{ message }}

{{ message2 }}

 

v-model="checkedNames">

Jack

 v-model="checkedNames">

John

v-model="checkedNames">

Mike

Checked names: {{ checkedNames }}

 

One

Two

Picked: {{ picked }}

提交

 

hi...h2