数据绑定
 
<!--步骤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. Gson解析json字符串、json数组转换成对象

    实体类: public class Product { private int id; private String name; private String date; public int get ...

  2. C#编写一款qq消息群发器

    先上软件成品图 功能编写大概分为以下几个部分了: 获取QQ分组 发送消息 先来讲发送消息吧,实现还是比较简单 //这段主要是用来打开会话窗口的(只能列表中的好友进行会话的) System.Diagno ...

  3. c#抽取pdf文档标题（4）——机器学习以及决策树

    我的一位同事告诉我,pdf抽取标题,用机器学习可以完美解决问题,抽取的准确率比较高.于是,我看了一些资料,就动起手来,实践了下. 我主要是根据以往历史块的特征生成一个决策树,然后利用这棵决策树,去判断 ...

  4. Mycat 分片规则详解--取模范围分片

    实现方式:该算法先进行取模,然后根据取模值所属范围进行分片 优点:可以自主决定取模后数据的节点分布 缺点:dataNode 划分节点是事先建好的,需要扩展时比较麻烦. 配置示例: <tableR ...

  5. 笔记：Spring Cloud Feign Hystrix 配置

    在 Spring Cloud Feign 中,除了引入了用户客户端负载均衡的 Spring Cloud Ribbon 之外,还引入了服务保护与容错的工具 Hystrix,默认情况下,Spring Cl ...

  6. Nginx+Tomcat动静分离及Nginx优化

    目的:nginx处理用户请求的静态页面,tomcat处理用户请求jsp页面,来实现动态分离,nginx处理静态页面效率远高于tomcat,这样一来就能更好的提高并发,处理性能. 准备软件: 下载jdk ...

  7. 源码实现 --> strcmp

    比较字符串大小 函数 int strcmp(const char *string1, const char *string2); 比较字符串string1和string2大小. 返回值< 0,  ...

  8. 如何在IOS上调试Hybrid应用

    最近在找关于在xcode上调试Hybrid应用的方法,比如我想进行断点调试.日志打印.屏幕适配等等,刻意去搜了下方法,虽然之前已经大致知道了,这里系统归纳一下,原文在https://developer ...

  9. Sweet Butter 香甜的黄油

    Sweet Butter 香甜的黄油 题目大意:m个点,n头奶牛,p条边,每一头奶牛在一个点上,一个点可以有多只奶牛,求这样一个点,使得所有奶牛到这个点的距离之和最小. 注释:n<=500 , ...

  10. 如何打包静态库.a文件 iOS

    代码调试好了开始打包成sdk,下面是将要打包的FRSDK代码(FRSDK.h暴露在外面有别人调用) 1.创建新工程(Xcode File-New-Project) 2.把下面的红色框的东西移除 3.将 ...