数据绑定
 
<!--步骤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. angular路由模块（二）

    上一章写的是如何创建一个简单的路由,这一样我们来看看如何创建一个路由模块.angular的思想就是(模块,组件,子组件.....). 我们在src/app目录下创建一个跟路由模块app-routing ...

  2. Apache Shiro 标签方式授权

    Shiro提供了一套JSP标签库来实现页面级的授权控制. 在使用Shiro标签库前,首先需要在JSP引入shiro标签: <%@ taglib prefix="shiro"  ...

  3. python web开发-flask调试模式

    使用run()方式可以启动flask应用,但是每次修改代码之后,需要重新启动,这样对于调试就很不太方便.Flask的调试模式可以让代码在每次修改之后自动载入. 有两种方法可以启用flask的调试模式 ...

  4. 问题排查：The requested URL /test/index.jsp was not found on this server

    问题描述 添加一个新模块,部署在服务器上.服务器上还部署有其他模块且访问正常,新模块和其他模块共用同一个域名.服务部署之后,请求如下: http://my.domain.com/test/index. ...

  5. mybatis-配置文件mybatis-config.xml

    在mybatis-config.xml中有初始的配置: <!-- 对事务的管理和连接池的配置 --> <environments default="development& ...

  6. java--补全诗句代码

    代码效果: 代码: import java.util.Scanner; /* 补全诗句 */ public class game1 { public static void main(String[] ...

  7. Objective-C 中的 BOOL

    之前开发了一个针对单个数据模型,自动建表.增删改查等操作的 ORM 库,后边在 iPhone 5c 上使用时,出现了 crash 的情况. 该项目在 Github 开源,项目地址为SXJDatabas ...

  8. Pick up lines搭讪

    1.In a bar Do you come here often? I've never seen you here before. What do you think of this bar? A ...

  9. springboot集成swagger2

    介绍:        Swagger是全球最大的OpenAPI规范(OAS)API开发工具框架,支持从设计和文档到测试和部署的整个API生命周期的开发.(摘自Swagger官网)Swagger说白了就 ...

  10. 【XML】 XML格式一些记录

    XML XML格式常用于网络通讯,本身不会有作为而是作为纯文本传输,可以说它是一种独立于应用和硬件的数据传输工具.虽然看起来XML比HTML要更加简单,也知道的更加晚一点,但是需要知道的是,XML才是 ...