vue2.0的初始化
vue2.0的初始化,使用 webpack构建工具生成的项目
直接上代码
main.js文件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
new vue:表示 创建了一个Vue对象的实例
el:'#app' :表示 将刚创建的Vue对象实例 挂载 指定的Dom元素中，本项目是index.html文件的<div id="app"></div>。
思想就像下面是使用jQuery、JS拼接菜单的Java项目中，JS中"变量html"把结果赋给了html元素nav
<ul id="nav" class="nav">
function drawTopNav(data) {
var html = [];
$.each(data, function(i, menu) {
html.push('<li><div class="nav-header"><a iconClass='+menu.ICON_CLASS+' class="firstNode" id="firstNode'
+ menu.ID
+ '" href="'
+ (!menu.URL || menu.URL == 'null' ? 'javascript:void(0);'
: menu.URL) + '"><img src="'+menu.IMG_URL+'"><h2>'
+ menu.NAME + '</h2></a></div></li>');
firstArr[menu.ID] = menu;
});
$("#nav").html(html.join(''));
$(".firstNode").bind("click", firstNodeClicked);
$(".firstNode").first().click();
}
render: h => h(App)：作用是渲染视图，作为填充的内容给挂载点el，这是vue2.0的写法
----
下面是vue1.0的写法
components: { App },
template: '<App/>'
components: { App }，作用是 注册组件信息
template: '<App/>'作用是 简写的模板调用组件的标签
实际上这两行代码的作用是一样的,
作用是渲染视图，作为填充的内容给挂载点el
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>test_vue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue文件
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template> <script>
export default {
name: 'App'
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
router文件下的index.js文件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
components文件夹下的HelloWorld.vue文件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links YYYYYY 2019</h2>
<ul>
<li>
<a href="https://vuejs.org" target="_blank">
Core Docs
</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank">
Forum
</a>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank">
Community Chat
</a>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank">
</a>
</li>
<br>
<li>
<a href="http://vuejs-templates.github.io/webpack/" target="_blank">
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a href="http://router.vuejs.org/" target="_blank">
vue-router
</a>
</li>
<li>
<a href="http://vuex.vuejs.org/" target="_blank">
vuex
</a>
</li>
<li>
<a href="http://vue-loader.vuejs.org/" target="_blank">
vue-loader
</a>
</li>
<li>
<a href="https://github.com/vuejs/awesome-vue" target="_blank">
awesome-vue
</a>
</li>
</ul>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
} ul {
list-style-type: none;
padding: 0;
} li {
display: inline-block;
margin: 0 10px;
} a {
color: #42b983;
}
</style>
最终显示的页面：
vue2.0的初始化的更多相关文章
- vue2.0从头开发项目管理系统
1.自己的github建一个项目. 2.本地vue2.0项目初始化. 安装node.js,检查node版(node -v). 安装webpack(npm install webpack -g),检查w ...
- vue2.0动态绑定图片src属性值初始化时报错
在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <te ...
- vue2.0实践的一些细节
最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...
- Vuex2.0+Vue2.0构建备忘录应用实践
一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...
- 基于Vue2.0+Vue-router构建一个简单的单页应用
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...
- 项目vue2.0仿外卖APP（六）
goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...
- 项目vue2.0仿外卖APP（五）
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
- vue2.0 开发实践总结之入门篇
vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文 ...
- vue2.0入门
vue2.0 开发实践总结之入门篇 vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工 ...
随机推荐
- VS2015Git 源代码工具使用
1. 首先到源代码托管平台申请个账户:https://git.oschina.net/ 2.创建流程图: 2.1 开始创建项目: 2.2 3. 4. 作者:江宁织造 qq空间:苦心孤诣博客:http: ...
- 2018-2019-2 20165312《网络攻防技术》Exp6 信息搜集与漏洞扫描
2018-2019-2 20165312<网络攻防技术>Exp6 信息搜集与漏洞扫描 目录 一.信息搜集技术与隐私保护--知识点总结 二.实验步骤 各种搜索技巧的应用 Google Hac ...
- 软件测试：lab1.Junit and Eclemma
软件测试:lab1.Junit and Eclemma Task: Install Junit(4.12), Hamcrest(1.3) with Eclipse Install Eclemma wi ...
- VS2017 ASP.NET MVC 5.0 开部署问题汇总
1[SqlException (0x80131904): 拒绝了对对象 '****' (数据库 '***',架构 'dbo')的 EXECUTE 权限.] “/”应用程序中的服务器错误. SQL 20 ...
- Angular6 Observable.fromEvent error: “Invalid event target”
今天在angular6项目中写了个拖拽功能,但是控制台报错,如图 后来在控制台打出发现,原来是 ngOnInit( ) 这个生命周期里,页面的dom节点还未产生,还只是null. 改为用 ngAfte ...
- Winform 弹出窗体等待
显示效果: FrmWaiting.cs: public FrmWaitingBox(EventHandler<EventArgs> Method,string msg) { Initial ...
- 虚拟机Ubuntu18.04——gcc版本的升降
致读者:这是本人第一篇博客,小试牛刀,希望能在以后的道路中分享出更多实用的技巧和知识,大家一起进步. 操作环境: VMware Workstation 14Pro .64位Ubuntu18.04系统 ...
- CI/CD
CI/CD 啥是CI/CD CI: continuous integration, 持续集成.就是频繁地把开发的工作提交到主线代码.主要是为了解决集成问题.什么是集成问题呢,白话说,就是从你本地的代码 ...
- Java学习之代码块(静态,构造代码块,构造方法)执行顺序
静态代码块 static{ 代码 } 随着类的加载而加载,随类的消失而消失,存在于类中,方法外,最先执行,且只加载1次,可用来加载驱动及初始化对象属性. 构造代码块 { } 也存在于类中, ...
- mycat数据中间件、nginx
MyCat & Nginx 课程目标 目标1:理解MyCat分片,能够配置MyCat分片 目标2:掌握Nginx的安装与静态网站部署 目标3:掌握Nginx的静态网站部署 目标4:理解N ...