数据绑定
 
<!--步骤1：创建html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<!--步骤2：引入vue.js文件-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--步骤3：创建一个div标签，并给它一个id名：app-->
<div id="app">
<!--Vue模板的数据绑定方法，类似于很多其他前端的模板，可以用两对花括号进行绑定Vue中的数据对象的属性 -->
{{message}}
</div>
    
    <div id="app2">
        <span>{{ msg1 + '-' + msg2 }}</span>
    </div>
</body>
<script>
// 步骤4：创建Vue对象，并把数据绑定到创建好的div中.
var vm = new Vue({ //创建Vue对象.
el: '#app', //el属性：把当前Vue对象挂载到id是app的div中，类似于angular中的ng-app.也就是说vue从这里开始执行.
data: { //data:Vue对象中绑定的数据.
message: 'Hello Vue' //message:自定义的数据.
}
});
    var app = new Vue({ // 创建Vue对象。
el: '#app2', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
data: { // data: 是Vue对象中绑定的数据
msg1: 'Hello' , // msg1 自定义的数据
msg2: 'Vue' // msg2 自定义的数据
}
    });
</script>
</html>
 
 
Vue入门之内联样式
 
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之内联样式</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">
vue 入门
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
size: 19,
width: 200,
bgcolor: 'red'
}
});
</script>
</body>
</html>
 
Vue入门之数据绑定-表达式运算
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之数据绑定-表达式运算</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{ msg1 + ' - ' + msg2 }}</span>
<p>
{{ isOk ? '123' : '456' }}
</p>
<p>我的年龄是： {{ age*2 }}</p>
</div>
<script>
var app = new Vue({ // 创建Vue对象。Vue的核心对象。
el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
data: { // data: 是Vue对象中绑定的数据
msg1: 'Hello', // msg1 自定义的数据
msg2: 'Vue',
isOk: true,
age: 18
}
});
</script>
</body>
</html>
 
双向数据绑定
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向数据绑定</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model可以直接指向data中的属性，双向绑定就建立了 -->
<input type="text" name="txt" v-model="msg">
<p>您输入的信息是：{{ msg }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '双向数据绑定的例子'
}
});
</script>
</body>
</html>
vue列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue列表渲染</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
模板引擎都会提供循环的支持，Vue也不例外。Vue提供了一个v-for指令，基本用法类似于foreach的用法。
<div id="app">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<!-- 每次for循环，都会创建一个tr标签。item是遍历的元素。 -->
<tr v-for="item in userList" >
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.address }}</td>
</tr>
</tbody>
</table>
<ul>
<!-- 通过template标签，可以一次循环，输出两个li标签 -->
<template v-for="item in userList">
<li>{{ item.name }}</li>
<li>{{ item.age }}</li>
<li>{{ item.address }}</li>
</template>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
userList: [
{'name': 'Jack', 'age': 18, 'address': 'New York'},
{'name': 'Jennifer', 'age': 22, 'address': 'LA'},
{'name': 'Jenny', 'age': 25, 'address': 'Boston'}
]
}
});
</script>
</body>
</html>
 
动态显示表格
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门--动态显示表格</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" cellpadding="10">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<!-- 如果列表有数据，直接输出表格数据，没有数据提示用户没有数据 -->
<tbody v-if="userList.length > 0">
<tr v-for="item in userList" >
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.address }}</td>
</tr>
</tbody>
<tbody v-else>
<tr><td colspan="3">没有数据！</td></tr>
</tbody>
</table>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
userList: []
}
});
// 每秒钟插入一条数据。
setInterval(function () {
app.userList.push({'name': '张三', 'age': 18, 'address': '女厕所'});
}, 1000);
</script>
</body>
</html>

嵌套路由
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套路由</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!--- 第一步，将vue-router的源代码引入-->
<script src="js/vue-router.js" ></script>
</head>
<body>
<div id="app">
<div class="container">
<ul class="nav nav-pills">
<!--- 使用router-link 进行跳转 -->
<li><router-link to="/index/i">首页</router-link></li>
<li><router-link to="/index/b">图书列表</router-link></li>
<li><router-link to="/index/g">游戏列表</router-link></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
</div>
<script>
/**
* 配置路由，使用官方的VueRouter
* new VueRouter 得到一个VueRouter的实例
* 在VueRouter中传递参数（对象）
* 在参数中有个routes的数组属性
* 这个数组是一个对象数组
* 每一个对象就是一个路由状态
*/
var router = new VueRouter({
routes : [
{
path : "/index",
component : {
//模板代码 这里一般是一个闭合的html标签，比如一个div。
template : `//这里用了反（单引号）可以有代码提醒 也可以用正常的单引号
<div>
<h1>首页-xushuai</h1>
<router-view></router-view>
</div>
`
},
children : [
{
path : "i",
component : {
template : "<h1>这个是嵌套的首页</h1>"
}
},
{
path : "b",
component : {
template : "<h1>这个是嵌套的图书列表</h1>"
}
},
{
path : "g",
component : {
template : "<h1>这个是嵌套的游戏列表</h1>"
}
}
]
}
]
});
new Vue({
data : {
username : "刘德华"
},
router : router
}).$mount("#app");
</script>
</body>
</html>

vue-入门的更多相关文章

  1. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. vue入门学习（基础篇）

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  5. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  6. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

  7. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  8. parcel+vue入门

    一.parcel简单使用 npm install -D parcel-bundler npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件.) Pa ...

  9. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  10. 学习Vue 入门到实战——学习笔记

    闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...

随机推荐

  1. intellij idea快捷键字典

    最近在重装系统,在安装python IDE时候依然安装了sublime Text3和intellij Idea(冏,别问为什么没安装pycharm,0-0 逃).首先是已然将之前一直使用的sublim ...

  2. DevExpress中GridControl自定义汇总列值（有选择性的汇总）

    今天碰到有同事遇到这个方面的需求,贴一下吧. private void gvTop_CustomSummaryCalculate(object sender, CustomSummaryEventAr ...

  3. select函数的介绍和使用

    我们所使用的I/O模型一共有五种. 分别为阻塞I/O,非阻塞I/O,I/O复用,信号驱动I/O,异步I/O. 所谓I/O复用就是指管理多个I/O文件描述符,一般会使用(select,poll,epol ...

  4. python文件基本操作（读，写，追加）

    一:只读(r) f=('d:\ python的联系文件'')   绝对路径和相对路径(绝对路径:能找到文件开始到结束路径,真实存在的路径,相对路径:在绝对路径一致的情况下新建一个文件) f=open( ...

  5. vue 数组渲染问题

    vue 数组渲染问题 问题一: 用v-for循环渲染数组数据时,数据更新了,视图却没有更新 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 当你利用索引直接设置一个项时, ...

  6. 十倍效能提升——Web 基础研发体系的建立

    1 导读 web 基础研发体系指的是, web 研发中一线工程师所直接操作的技术.工具,以及所属组织架构的总和.在过去提升企业研发效能的讨论中,围绕的主题基本都是——”通过云计算.云存储等方式将底层核 ...

  7. Go a lot of way but I go back to the original point

    I try a lot of blog platform and even construct my blog website. But I have to say I just want to ha ...

  8. 边做边学入门微信小程序之仿豆瓣评分

    微信小程序由于适用性强.逻辑简要.开发迅速的特性,叠加具有海量活跃用户的腾讯公司背景,逐渐成为了轻量级单一功能应用场景的较佳承载方式,诸如电影购票.外卖点餐.移动商城.生活服务等场景服务提供商迅速切入 ...

  9. Mycat 分片规则详解--日期（天）分片

    实现方式:按照日期来分片 优点:使数据按照日期来进行分时存储 缺点:由于数据是连续的,所以该方案不能有效的利用资源 配置示例: <tableRule name="sharding-by ...

  10. JAVA代码提示

    经过以上过程,整个项目需要的环境差不多搭建完成了.接下来一个小技巧,如下图进行配置之后就可以将只在.出现时进行代码提示换成任意字母+.出现时的代码提示了(.abcdefghijklmnopqrstuv ...