数据绑定
 
<!--步骤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. UWP 图片模糊

    先看一下效果: 这是微识别的个人中心页面,顶部有头像,以及背景图片模糊. 要实现这样的效果,有两种方法. 第一种麻烦点,也是我现在用的.想看简单的,翻到最后 1. 首先看一下xaml代码: <S ...

  2. python 批量删除mysql前缀相同的表

    1,一般游戏log数据库会存储大量的玩家行为日志,一种行为一张表,每天生成一张新表,一天会有30+张不同行为的表,通常会保留玩家日志1年左右,对于超过1年的日志需要删除 2,log数据库一年会保存1W ...

  3. Spring Mobile——探测客户端设备和系统

    Spring Mobile--探测客户端设备和系统 今天闲来无事,浏览Spring的官方网站,发现了Spring Mobile项目,之前也看到过,还以为是针对手机端的项目,并没有细看.今天仔细看了一下 ...

  4. 堆排序(Java数组实现)

    堆排序:利用大根堆 数组全部入堆,再出堆从后向前插入回数组中,数组就从小到大有序了. public class MaxHeap<T extends Comparable<? super T ...

  5. C语言第九次博客作业--指针

    一.PTA实验作业 题目1:两个4位正整数的后两位互换 1. 本题PTA提交列表 2. 设计思路 定义循环变量i,两个数组a[4],b[4] for i=0 to 3 a[i]*p取各个位 *p/=1 ...

  6. [Luogu P1564] 膜拜

    Description 神牛有很多-当然-每个同学都有自己衷心膜拜的神牛. 某学校有两位神牛,神牛甲和神牛乙.新入学的N 位同学们早已耳闻他们的神话. 所以,已经衷心地膜拜其中一位了.现在,老师要给他 ...

  7. SSE(Server-sent events)技术在web端消息推送和实时聊天中的使用

    最近在公司闲着没事研究了几天,终于搞定了SSE从理论到实际应用,中间还是有一些坑的. 1.SSE简介 SSE(Server-sent events)翻译过来为:服务器发送事件.是基于http协议,和W ...

  8. 大数据 --> ProtoBuf的使用和原理

    ProtoBuf的使用和原理 一.简介 Protobuf是一个灵活的.高效的用于序列化数据的协议.相比较XML和JSON格式,protobuf更小.更快.更便捷.Protobuf是跨语言的,并且自带了 ...

  9. oracle维护数据的完整性

    介绍: 数据的完整性用于确保数据库数据遵从一定的商业的逻辑规则.在oracle中,数据完整性可以使用约束.触发器.应用程序(过程.函数)三种方法来实现,在这三种方法中,因为约束易于维护,并且具有最好的 ...

  10. python全栈开发-Day10 装饰器(闭合函数的应用场)

    一. 装饰器 装饰器就是闭包函数的一种应用场景 什么是闭包函数?我们再来回忆一下: 闭包函数: 定义在函数内部的函数,并且该函数包含对外部函数作用域(强调:对全局作用域名字的引用不算闭包)名字的引用, ...