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:

Vue 测试实例 - 菜鸟教程(runoob.com)

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-model="message" placeholder="edit me">

Message is: {{ message }}

{{ message2 }}


 

v-model="checkedNames">

 v-model="checkedNames">

v-model="checkedNames">


Checked names: {{ checkedNames }}

 



Picked: {{ picked }}

 

hi...h2

 

你可能感兴趣的:(vue.js)