vue.js基础demo

最新推荐文章于 2024-09-12 08:17:47 发布
最新推荐文章于 2024-09-12 08:17:47 发布
阅读量335 收藏
点赞数
分类专栏： vue.js 文章标签： vue.js基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyf1712011164/article/details/103834232
版权

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:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

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

</div>

 

<script>

new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue.js!'

  }

})

</script>

</body>

</html>

Vue.js安装

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入

使用cdn方法

Staticfile CDN（国内） :https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/vue/dist/vue.js

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

使用方法如例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

//script引入

</head>

<body>

<div id="app">

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

</div>

 

<script>

new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue.js!'

  }

})

</script>

</body>

</html>

 

 

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 <test@runoob.com>

? 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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

  {{ message }} {{name}}

</div>

 

<script type="text/javascript">

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!',

name : "Vue"

}

});

</script>

 

</body>

</html>

 

 

### 安装 `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

```

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

{{msg}}

</div>

<script type="text/javascript">

var vm = new Vue({

el : "#app",

data : {

msg : "hi vue",

},

//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

beforeCreate:function(){

console.log('beforeCreate');

},

/* 在实例创建完成后被立即调用。

在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。

然而，挂载阶段还没开始，$el 属性目前不可见。 */

created :function(){

console.log('created');

},

//在挂载开始之前被调用：相关的渲染函数首次被调用

beforeMount : function(){

console.log('beforeMount');

 

},

//el 被新创建的 vm.$el 替换, 挂在成功

mounted : function(){

console.log('mounted');

 

},

//数据更新时调用

beforeUpdate : function(){

console.log('beforeUpdate');

 

},

//组件 DOM 已经更新, 组件更新完毕

updated : function(){

console.log('updated');

 

}

});

setTimeout(function(){

vm.msg = "change ......";

}, 3000);

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

{{msg}}

<p>Using mustaches: {{ rawHtml }}</p>

<p v-html="rawHtml"></p>

<div v-bind:class="color">test...</div>

<p>{{ number + 1 }}</p>

<p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>

<p>{{ message.split('').reverse().join('') }}</p>

</div>

<script type="text/javascript">

var vm = new Vue({

el : "#app",

data : {

msg : "hi vue",

rawHtml : '<span style="color:red">this is should be red</span>',

color:'blue',

number : 10,

ok : 1,

message : "asvue"

}

});

vm.msg = "hi....";

</script>

<style type="text/css">

.red{color:red;}

.blue{color:blue; font-size:100px;}

</style>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

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

<a v-bind:href="url">...</a>

<div @click="click1">

<div @click.stop="click2">

click me

</div>

</div>

</div>

<script type="text/javascript">

var vm = new Vue({

el : "#app",

data : {

seen : true,

url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"

},

methods:{

click1 : function () {

 

console.log('click1......');

},

click2 : function () {

// vm.url=null;

console.log('click2......');

}

}

});

</script>

<style type="text/css">

 

</style>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

<div

class="test"

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

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

hi vue

</div>

 

<div

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

hi vue

</div>

</div>

<script type="text/javascript">

var vm = new Vue({

el : "#app",

data : {

isActive : true,

isGreen : true,

color : "#FFFFFF",

size : '50px',

isRed : true

}

});

</script>

<style>

.test{font-size:30px;}

.green{color:#00FF00;}

.active{background:#FF0000;}

</style>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

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

  A

</div>

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

  B

</div>

<div v-else-if="type === 'C'">

  C

</div>

<div v-else>

  Not A/B/C

</div>

<h1 v-show="ok">Hello!</h1>

</div>

<script type="text/javascript">

var vm = new Vue({

el : "#app",

data : {

type : "A",

ok : false

}

});

</script>

<style type="text/css">

 

</style>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

<ul>

<li v-for="item,index in items" :key="index">

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

</li>

</ul>

<ul>

<li v-for="value, key in object">

{{key}} : {{ value }}

</li>

</ul>

</div>

<script type="text/javascript">

var vm = new Vue({

el : "#app",

data : {

items : [

{ message: 'Foo' },

{ message: 'Bar' },

{ message: 'Bar' }

],

object: {

title: 'How to do lists in Vue',

author: 'Jane Doe',

publishedAt: '2016-04-10'

}

}

});

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

<div id="example-1">

<button v-on:click="counter += 1"> 数值 :  {{ counter }} </button><br />

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

</div>

</div>

<script type="text/javascript">

var vm = new Vue({

el : "#app",

data : {

counter: 0,

// name : "vue"

},

methods:{

greet : function (str, e) {

alert(str);

console.log(e);

}

}

});

</script>

<style type="text/css">

 

</style>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

<div id="example-1">

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

<p>Message is: {{ message }}</p>

<textarea v-model="message2" placeholder="add multiple lines"></textarea>

<p style="white-space: pre-line;">{{ message2 }}</p>

<br />

 

<div style="margin-top:20px;">

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">

<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

<label for="mike">Mike</label>

<br>

<span>Checked names: {{ checkedNames }}</span>

</div>

 

<div style="margin-top:20px;">

<input type="radio" id="one" value="One" v-model="picked">

<label for="one">One</label>

<br>

<input type="radio" id="two" value="Two" v-model="picked">

<label for="two">Two</label>

<br>

<span>Picked: {{ picked }}</span>

</div>

<button type="button" @click="submit">提交</button>

</div>

 

</div>

<script type="text/javascript">

var vm = new Vue({

el : "#app",

data : {

message : "test",

message2 :"hi",

checkedNames : ['Jack', 'John'],

picked : "Two"

},

methods: {

submit : function () {

console.log(this.message2);

 

}

}

});

</script>

<style type="text/css">

 

</style>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

<button-counter title="title1 : " @clicknow="clicknow">

<h2>hi...h2</h2>

</button-counter>

<button-counter title="title2 : "></button-counter>

<button-counter title="title3 : "></button-counter>

</div>

<script type="text/javascript">

Vue.component('button-counter', {

props: ['title'],

data: function () {

return {

  count: 0

}

},

template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',

methods:{

clickfun : function () {

this.count ++;

this.$emit('clicknow', this.count);

}

}

})

var vm = new Vue({

el : "#app",

data : {

 

},

methods:{

clicknow : function (e) {

console.log(e);

}

}

});

</script>

<style type="text/css">

 

</style>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

<button-counter></button-counter>

<test></test>

<button-counter></button-counter>

</div>

<script type="text/javascript">

Vue.component('button-counter', {

props: ['title'],

data: function () {

return {}

},

template: '<div><h1>hi...</h1></div>',

methods:{

 

}

})

var vm = new Vue({

el : "#app",

data : {

 

},

methods:{

clicknow : function (e) {

console.log(e);

}

},

components:{

test : {

template:"<h2>h2...</h2>"

}

}

});

</script>

<style type="text/css">

 

</style>

</body>

</html>

 

大怪兽0110
关注
专栏目录
Vue.js学习-搭建一个简单的demo
ch648966459的专栏
02-11 2万+
原创申明：本文为博主原创，转载请注明出处！ 这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明：本次搭建基于Win 7平台 Node.js 安装 官网提供了支持多种平台的的LTS版本下载，我们根据需要来进行下载安装。对于Windows平台提供了.mis和.zip(二进制)两种选择，我们可以根据自己需要任选一种安装。具体安装过程就不详说。 注...
Vue.js 实战 问卷调查demo
04-03
Vue.js 是一款轻量级的前端JavaScript框架，以其易学易用、组件化开发和高性能等特点，被广泛应用于现代Web应用开发。在这个“Vue.js实战 问卷调查demo”项目中，我们将深入探讨如何利用Vue.js的特性来构建一个问卷...
vue.js-demo
02-05
vue.js2.0小demo，感觉vue实例比较少，所以共享这个vue小实例，一起学习
Vue.js——60分钟快速入门
dengjie0448的博客
06-27 887
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一...
Vue-Demo 项目教程
最新发布
gitblog_00328的博客
09-12 329
Vue-Demo 项目教程 项目地址:https://gitcode.com/gh_mirrors/vuedem/vue-demo 项目介绍 Vue-Demo 是一个基于 Vue.js 的示例项目，旨在提供给开发者一个快速上手和理解 Vue 框架基本特性的实例。它通过简洁的代码结构和清晰的注释，展示了如何在 Vue 环境下组织应用程序，包括组件化开发、状态管理、路由控制等关键概念。这个项目适合作为...
Vue.js 学习笔记（六）demo案例
qq_44648936的博客
03-01 412
一、代码（有一些准备工作，仔细看代码） <!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsde
Vue.js 简单demo
qq_29821795的博客
08-29 451
demo1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
vue-d3-demo:使用Vue.js + D3.js绘制图形的演示
05-17
一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and ...
supermall:vue.js newdemo
04-13
Vue.js是一款轻量级的前端JavaScript框架，以其简洁的API和高效的虚拟DOM管理著称，广泛应用于构建用户界面。在这个项目中，我们可以看到开发者遵循了标准的Vue项目结构和工作流程。 首先，"npm install"是初始化...
Vue Pivottable-基于jQuery的PivotTable.js的Vue端口-Vue.js开发
05-27
Vue Pivottable这是基于jQuery的PivotTable.js Live Demo链接的Vue端口。运行演示$ git clone https://github.com/Seungwoo321/vue-pivottable.gi Vue Pivottable这是基于jQuery的Vue端口PivotTable.js实时演示链接...
Vue.js学习文档
06-12
### Vue.js 学习文档知识点总结 #### 一、Vue.js 概览 - **起源与发展**： - **起源**：Vue.js 最初由尤雨溪（Evan You）在2013年底作为个人实验项目开始开发。 - **公开发布**：2014年2月正式公开发布。 - **...
Vue.js购物车demo
05-31
一个用vue.js做的购物车小demo，可根据自身需要进行增加删除修改等
vue.js入门Demo（一）
03-23
vue.js前端框架demo代码
使用官方脚手架搭建的 vue.js demo 项目
10-23
这个是使用官方脚手架搭建的一个 vue.js 的 todolist 的项目，代码很简单，供参考
学习Vuejs过程中的demo
08-12
学习 Vue.js 过程中的 demo
vue-blog-demo：一个Vue.js博客演示，用于演示api数据的正确解耦和资源提供者的交换
02-06
杀手级Vue.js博客演示：2小时内启动 在此演示中，我将提供一个开源Vue.js博客演示+封面。 脚步： 设置和路由 显示带有过滤器的博客供稿 显示带有评论的个人帖子 创建一个自定义Vue插件以保持数据分离 结果将是可用于JAMstack的，真正分离的Vue博客，您可以将其插入任何数据源-稍后再进行介绍。 享受乡亲！ 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification n
vuejs学习系列-第一个小demo
弼码温
04-17 4213
现在上节中安装的项目的src目录中建立pages文件用来装demo源码 我们现在的目录结构是这样的 首先在pages里新建demo01文件夹，顺便在demo01下，建立index.vue文件，然后在router里添加{ path: '/demo01', name: 'DEMO01', component: demo01 }index.vue里将会放置我们所有的demo
Vuejs demo
n602655099的专栏
10-14 2712
Vue.js 是用于构建交互式的 Web  界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。 刚做了一个小的demo，作为自己的“hello
基于vue.js的小demo
qq_32227781的博客
04-19 279
说明：仿照钟于博客 综合实例所实现的小demo效果图如下： 主要代码： HTML：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="style/demo.css"> </head> <body> <d
Vue.js基础语法详解：值得收藏的学习资源
文章还提供了一个简易的Vue.js示例项目链接（<https://github.com/chenhao-ch/demo-vue>），读者可以通过下载并实践这些代码，更好地理解和掌握Vue.js的基础语法。 本文档涵盖了Vue.js的基本概念、数据绑定的使用、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值