数据绑定
 
<!--步骤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. 杭电oj-1002-A+B Problem

    Problem Description I have a very simple problem for you. Given two integers A and B, your job is to ...

  2. CentOS7.4安装MySQL踩坑记录

    CentOS7.4安装MySQL踩坑记录 time: 2018.3.19 CentOS7.4安装MySQL时网上的文档虽然多但是不靠谱的也多, 可能因为版本与时间的问题, 所以记录下自己踩坑的过程, ...

  3. 值得 .NET 开发者了解的15个特性

    本文列举了 15 个值得了解的 C# 特性,旨在让 .NET 开发人员更好的使用 C# 语言进行开发工作. 1. ObsoleteAttribute ObsoleteAttribute 适用于除组件. ...

  4. 无法获得数据库 'model' 上的排他锁 解决方法

    解决方法: 在查询分析器中运行如下代码即可: declare @sql varchar(100) while 1=1 begin select top 1 @sql = 'kill '+cast(sp ...

  5. iOS 提交审核报错 ERROR ITMS-90087解决办法

    ERROR ITMS-: "Unsupported Architectures. The executable for yht.temp_caseinsensitive_rename.app ...

  6. Angular开发实践（二）：HRM运行机制

    引言 在angular-start项目中启用了模块热替换(HMR - Hot Module Replacement)功能,关于如何在angular-cli启用HRM,请查看HRM配置 那HMR是个什么 ...

  7. IPFS如何挖矿<Filecoin系统>?(一)

    本来这篇文章应该晚一点写, 但是这几天一直有朋友在公众号留言, 迫切的想知道IPFS到底如何挖矿, 所以就提前写一篇关于IPFS挖矿的文章. 本文暂不涉及具体的技术细节, 只做大概的介绍. 首先, 好 ...

  8. IDEA设置生成类基本注释信息

    在eclipse中我们按一下快捷键就会生成类的基本信息相关的注释,其实在IDEA中也是可以的,需要我们手动设置,之后再创建类的时候就会自动加上这些基本的信息. File-->Setting 在E ...

  9. SqlSever数据库实践周

    资源下载 进行了为期5天的数据库设计,虽然以前用过数据库,但是这一次是使用书上规范的设计流程设计的数据库,感觉有必要记录一下,希望对其他人有帮助. 我的收获:在这个博客中会体现到我的收获,对于将要进行 ...

  10. python安装第三方库

    在编写爬虫程序时发现unsolved import 一时不解,以为是ide出问题了,其实是没有安装第三方库导致的. 于是到https://pypi.python.org/pypi/requests/去 ...