Vue 文档Demo01
Vue
1. Vue 基础
1. 声明式渲染
1. v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>vue123</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- built files will be auto injected -->
<script src="index.js"></script>
</body>
</html>
var app = new Vue({
el:'#app',
data:{
message:'HelloWorld'
}
});
2.条件与循环
v-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p v-if="seen">Now you see</p>
</div>
<!-- built files will be auto injected -->
<script>
var app = new Vue({
el: '#app',
data: {
seen :false
}
});
app.seen = false
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
todos:[
{text:'learning js'},
{text: 'learning Vue'},
{text: 'learning 整个项目'}
]
}
})
app.todos.push({text:'新项目'})
</script>
</body>
</html>
3.处理用户输入
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="qpp5">
<p>{{ message }}</p>
<button v-on:click="reverseMess">逆转消息
</button>
</div>
<script>
var app5 = new Vue({
el: '#qpp5',
data:{
message:'Hello Vue.js'
},
methods:{
reverseMess:function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="qpp5">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app5 = new Vue({
el: '#qpp5',
data:{
message:'Hello Vue.js'
},
methods:{
reverseMess:function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
4.组件化应用构建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<todo-item></todo-item>
<todo-item></todo-item>
<todo-item></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item',{
template:'<li>这是一个待办事项</li>'
})
var app = new Vue({
el:'#app'
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<todo-item
v-for="item in grocerylist"
v-bind:todo="item"
v-bind:key="item.id"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
// todo-item 组件现在接受一个
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el:'#app',
data:{
grocerylist:[
{id:0,text:"大白梨"},
{id:1,text:"巧克力"},
{id:2,text:"剩下什么都可以"}
]
}
})
</script>
</body>
</html>
Vue 文档Demo01的更多相关文章
- 按照vue文档使用JavaScript钩子但是却不能执行动画？
大家刚入VUE肯定是先去阅读文档, 在 进入/离开 & 列表过渡 这一章节有一小节 --------- JavaScript钩子 详情见vue文档: https://cn.vuejs.or ...
- vue文档全局api笔记1
全局api方法 1.Vue.extend(options) 请注意,extend创建的是一个组件构造器,而不是一个具体的组件实例.所以他不能直接在new Vue中这样使用: new Vue({comp ...
- 1小时搞定vuepress快速制作vue文档/博客+免费部署预览
先来一下演示效果.和vue的官方文档几乎是一致的,页面内容都可自定义. 此教程部署后的效果预览. 在你跟着教程搭建好项目之后,你会收获: 快速搭建一个文档/博客,后期只需要修改markdown内容和导 ...
- vue文档重读有感
vue 官方文档,每次读都有不一样的感受.项目已经做过一个了,遇到了不少问题,下面总结下这次看到的注意点: 一.指令方面 1. v-once 一次性绑定,只渲染元素和组件一次.随后的重新渲染,元素/ ...
- 想看Vue文档，cn放错位置，误入xx网站...
昨晚,DD在微信群(点击加入)里看到有小伙伴说,想去Vue官网看中文文档,不当心把cn写错了位置,结果进入了xx网站... 老司机们应该都知道,Vue官网的中文文档地址是:https://cn.vue ...
- vue文档全局api笔记2
1.Vue.filter( id, [definition] ) 在组件内注册 <template> <div id="app"> <div clas ...
- vue文档1-VSCode介绍
开发工具VSCode: Vue的开发工具用的是VSCode(Visual Studio Code),这款开发工具是微软官方出品,开源,免费,并且功能相当强大,使用者很多,插件相当丰富,是Vue开发的不 ...
- vue文档阅读笔记——计算属性和侦听器
页面链接:https://cn.vuejs.org/v2/guide/computed.html 注意点 计算属性用于 替代模板内的表达式. 如果计算属性所依赖的属性未更新,会返回自身的缓存. 侦听器 ...
- 将vue文档下载到本地预览
1下载:https://github.com/vuejs/cn.vuejs.org 到本地 2. npm install npm start # 开发服务器地址为 http://localhost ...
随机推荐
- Mysql 插入自增的最大版本号
有一个需求,在历史表中,一条数据,在最大版本号上进行自增 INSERT Biz_CourseStudyHistory ( contentStudyID, courseWareID, versionNO ...
- LInux_CentosOS中yum安装jdk及配置环境变量
系统版本 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) #安装之前先查看一下有无系统 ...
- 014-docker-终端获取 docker 容器(container)的 ip 地址
1. 进入容器内部后 cat /etc/hosts 会显示自己以及(– link)软连接的容器IP 2.使用命令 docker inspect --format '{{ .NetworkSetting ...
- Qt开发经验小技巧11-20
获取类的属性 const QMetaObject *metaobject = object->metaObject(); int count = metaobject->propertyC ...
- EasyNVR智能云终端硬件盒子x86版自我维护之摄像机网页直播系统基础运维
背景分析 随着EasyNVR软件为越来越多的用户接受和使用,我们也致力于用户的需求收集和需求的调研,发现一部分用户有关于硬件设备的需求,加之我们推出的免费产品EasyNVS云管理平台,可以说用户自己搭 ...
- mysql查询之分数排名
编写一个 SQL 查询来实现分数排名.如果两个分数相同,则两个分数排名(Rank)相同 +----+-------+ | Id | Score | +----+-------+ | 1 | 3.50 ...
- VMware的包格式vmdk转换为virtualBox的ova
使用winxp的vmdk作为案例 1 使用vmvare导入vmdk的winxp,点击文件---->导出为ovf 2 找到生成的ovf文件 3 打开virtualBox 管理---->导入虚 ...
- laravel 配置自动加载多路由文件
在 app\Providers\RouteServiceProvider文件下增加方法&注册: 增加之后就可以在routers下建立api文件夹,在里面添加路由了
- MAVEN安装代码到本地库，安装jar, source, javadoc的方式
cd /d %~dp0 mvn -Dpackaging=jar mvn -Dpackaging=jar -Dclassifier=sources mvn -Dpackaging=jar -Dclass ...
- SpringMVC的基本概念
1.1关于三层架构和MVC 1.1.1 三层架构 我们的开发架构一般都是基于两种形式,一种是 C/S 架构,也就是客户端/服务器,另一种是 B/S 架构,也就 是浏览器服务器.在 JavaEE 开发中 ...