文档章节

vue入门

木楠楠儿
 木楠楠儿
发布于 2017/08/05 17:02
字数 443
阅读 167
收藏 2
vue

http://note.youdao.com/noteshare?id=359b1d37c9998aa89a4a5a469b877a29&sub=93206BF973B349DC94981945B22129FF

1. 下载vuejs资源 可以是cli cdn 也可以是下载好的vueJS文件 并引入项目

2.创建html盒子结构

3.导入需要使用的页面

4.编写相关的JS代码,完成页面的渲染

视图和数据完全分离

方法一 使用官方CDN

代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<!-- 引入vuejs的cdn -->

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

</head>

<body>

<!--挂载的HTML盒子 -->

<div id="app">

{{msg}}

</div>

<!-- 编写js代码 -->

<script type="text/javascript">

// 测试 VUE是否被引进来

console.log(Vue);

// 创建vue实例对象

var app = new Vue({

// 挂载对象

el:"#app",

// 数据

data:{

msg:"打狗宝"

}

})

</script>

</body>

</html>

方法二 使用官方下载的vue js 开发版本

代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<!-- 引入js文件 -->

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

</head>

<body>

<!--挂载的HTML盒子 -->

<div id="app">

{{msg}}

</div>

<!-- 编写js代码 -->

<script type="text/javascript">

// 测试 VUE是否被引进来

console.log(Vue);

// 创建vue实例对象

var app = new Vue({

// 挂载对象

el:"#app",

// 数据

data:{

msg:"打狗宝"

}

})

</script>

</body>

</html>

方法三 在项目中使用npm 或者bower安装

项目 命令行使用 npm i vue

然后再 导入到页面

代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<!-- 引入js文件 -->

<script src="node_modules/vue/dist/vue.js" charset="utf-8"></script>

</head>

<body>

<!--挂载的HTML盒子 -->

<div id="app">

{{msg}}

</div>

<!-- 编写js代码 -->

<script type="text/javascript">

// 测试 VUE是否被引进来

console.log(Vue);

// 创建vue实例对象

var app = new Vue({

// 挂载对象

el:"#app",

// 数据

data:{

msg:"打狗宝"

}

})

</script>

</body>

</html>

© 著作权归作者所有

下一篇: 环境安装
木楠楠儿
粉丝 0
博文 5
码字总数 5052
作品 0
成都
程序员
私信 提问
Vue入门指南-06 Vue中的动画(快速上手vue)

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中...

番茄炒蛋少放糖
03/30
0
0
你可能需要的一本前端小册:Vue 项目构建与开发入门

最近抽时间写了一本关于 Vue 的小册:《Vue 项目构建与开发入门》,前前后后断断续续花了大概两个月的时间。作为 Vue 的第一批用户,同时也作为一名专栏作者,虽然我之前写过好几篇关于 Vue ...

劳卜
2018/11/28
0
0
Vue新手向:14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。 书写此教程的动机 Vue 作者尤雨溪在 新手向:Vue 2.0 的建议学习顺序 中给出了中肯...

追梦人物
01/16
0
0
.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现...

依乐祝
2018/11/28
0
0
Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb。在这篇文章中,我会把它如...

笔阁
2018/04/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Feign输出Info级别日志

背景   spring cloud netfix组件中,feign相关的日志默认是不会输出的,需要自定义配置才能输出,并且Feign只对Debug基本的日志做出响应, 实际业务需要输出Info级别的日志,所以需要做自定...

xiaomin0322
31分钟前
3
0
面向解决问题的java编程,spring boot,mybatis generator和坑-1starter

1、start一个spring boot项目 第一课我们也不能免俗,要从starter开始,spring boot的起始项目脚手架可以从spring boot官方starter生成地址开始:https://start.spring.io/ 这张图列出了一个...

wphmoon
31分钟前
1
0
Linux虚拟化技术—CentOS7.4下KVM虚拟化一 安装配置及基本操作

Linux虚拟化技术—CentOS7.4下KVM虚拟化一 安装配置及基本操作 0行云流水00人评论61017人阅读2018-04-11 19:57:20 KVM的安装配置与基本操作 目录 第一部分 实验环境 第二部分 安装图形界面 ...

linjin200
34分钟前
3
0
php获取网站favicon.ico图标 api源码

 通常情况下,做网站的都会给自己的网站添加一个Icon,浏览器上一长排的标签页,用Icon来区分就显得更加醒目。现在想找一个没有Icon的网站并不好找,可见没有Icon的网站是多么的业余啊。"什...

xiaogg
37分钟前
1
0
双亲委派的认识

首先JVM中有三种类加载器 Bootstrap启动类加载器 Extension扩展类加载器(ExtClassLoader) System系统类加载器(AppClassLoader) 某个特定的类接到加载类的请求时候,首先将加载任务委托给...

最胖的瘦子
41分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部