Vue--入门篇
一、v-model和单选按钮（radio）
<div id="app">
<input name="sex" value="男" type="radio" v-model='aaa'>男 //监测数据的变化！
<input name="sex" value="女" type="radio" v-model='aaa'>女
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
aaa:'男' //对应的value的值，可以设置默认选中
}, })
</script>
二、v-model和复选框（checkbox）
<div id="app">
<input type="checkbox" value="吃饭" v-model='like'>吃饭
<input type="checkbox" value="睡觉" v-model='like'>睡觉
<input type="checkbox" value="打豆豆" v-model='like'>打豆豆
<p>{{like}}</p>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
like:[] //接收数据的数组
}, })
</script>
三、v-model和下拉列表（select）
<div id="app">
<select v-model='checkout'> //下拉列表只需在select上绑定就可以
<option value="吃饭">吃饭</option>
<option value="睡觉">睡觉</option>
<option value="打豆豆">打豆豆</option>
</select>
<p>{{checkout}}</p>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
checkout:'打豆豆' //这里绑定谁，就默认显示谁。
},
})
</script>
v-model小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<header>
<label>
<input type="text" placeholder="请输入内容……" @keyup.enter='push'>
</label>
</header>
<section>
<ul>
<li v-for='(item,index) of getArr'>
<span>{{item}}</span>
<button @click='remove(index)'>删 除</button>
</li>
</ul>
</section>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
getArr:[],
},
methods:{
push(e){
this.getArr.push(e.target.value)
e.target.value='';
},
remove(i){
this.getArr.splice(i,1) //注意：删除，虽然是和原生数组的方法名一样，但不再是原生的本质，而是经过二次封装之后的。
}
}
})
</script>
</body>
</html> v-model的修饰符
<div id="app">
<!-- 实现一个双向数据绑定 -->
<!-- <input type="text" :value="message" @input='fn'> --> //给value绑定value值
<!-- v-model的修饰符 .lazy 失去焦点是…… .number 返回一个数据类型-->
<input type="text" v-model.lazy='message'>
<p>{{message}}</p>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
message:'原生value不支持，所以用绑定，加：'
},
methods:{
fn(e){
this.message=e.target.value;
}
}
})
</script>
四、computed （计算属性）注意：属性！属性！属性！！！！是一个属性。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div id="computed">
<p>{{usename}}</p> //此处不再加括号！！！属性
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#computed',
data: {
firstname: 'Lebron',
lastname: 'james',
},
computed: {//计算属性---因为是属性，所以直接写，不再加括号
// usename() {
// return this.firstname + '.' + this.lastname
// }
//计算属性的特点：有缓存，
//展开写法；
usename:{
//里面有一个get（）方法和set（）方法；
get(){
return this.firstname+'.'+this.lastname
},
set(val){ }
}
}
})
</script>
</body> </html>
vue入门小demo
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0;}
ul,li{list-style: none;}
section{width:600px;height:400px;margin:200px auto;border: 2px solid #000;position: relative;left: 200px;;}
.td{border-bottom: 1px solid rebeccapurple;width: 100%;height:50px;}
.header{float: left;margin:0 40px;line-height: 50px;}
.con{width:600px;height:70px;border-bottom: rebeccapurple 1px solid;display: flex;justify-content: space-around;}
p{float: left;height: 70px;line-height: 70px;text-align: center;width:100px;}
P:nth-of-type(3){display: flex;justify-content: space-around;width:100px;height:50px;align-items: center;}
button{margin-right: 0;width:80px;height:25px;background:rgb(207, 205, 204);outline: none;border: none;border-radius: 10px;cursor: pointer;}
div{position: absolute;bottom: 0;left: 0;}
</style>
</head> <body>
<div id="app">
<section>
<ul class="td">
<li class="header">商品名</li>
<li class="header">价格</li>
<li class="header">数量</li>
<li class="header">产地</li>
<li class="header">删除</li>
</ul>
<ul>
<li class="con" v-for='(item,index) in message'>
<p>{{item.name |fruit}}</p>
<p>{{item.price | setMoney}}</p> // | 是一个管道，后接过滤
<p><button class="ctrl" @click='cut(index)'> - </button>{{item.num}}<button @click='add(index)'> + </button></p>
<p>{{item.city}}</p>
<p><button @click='remove(index)'>删 除</button></p>
</li>
</ul>
<div>总价格:{{allPrice | allMoney}}</div>
</section>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: [
{
name: '红富士',
price: 15,
num: 5,
city: '静宁',
},
{
name: '哈密瓜',
price: 10,
num: 10,
city: '新疆',
},
{
name: '香蕉',
price: 20,
num: 10,
city: '三亚',
},
{
name: '葡萄',
price: 15,
num: 5,
city: '哈密',
},
]
},
methods:{
cut(i) {
this.message[i].num > 1 && this.message[i].num--; //如果 && 遇到false后面的表达式将不再执行
},
add(i) {
this.message[i].num < 10 && this.message[i].num++;
},
remove(i){
this.message.splice(i,1)
}
},
computed:{
allPrice() {
return this.message.reduce((prevPrice, nowPrice) => {
return prevPrice + (nowPrice.price * nowPrice.num)
},0)
}
},
filters:{//过滤
setMoney(price){ //实参必须为所要筛选的数组项！！！
return '￥'+price+ '.00'
},
fruit(name){
return '水果：'+name
},
allMoney(allPrice){
return '￥'+allPrice+'.00'
}
}
})
</script>
</body> </html>
五、watch （监视）
<body>
<div id="app">
<!-- <input type="text" v-model='dog'> -->
<input type="text" v-model='obj.b.c'>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
dog:'哈士奇',
obj:{
a:1,
b:{
c:222,
}
}
},
computed:{ },
watch:{ //监听数据的变化。
// dog(nValue,Ovalue){
// console.log(nValue,Ovalue)
// }
// 'obj.a'(newVal,oldVal){
// console.log(newVal,oldVal)
// } //深层监听；
obj:{
handler(newVal,oldVal){
console.log(newVal.b.c,oldVal.b.c)
},
deep:true, //深层监控，handle此方法必须写，而且固定不变，
}
}
})
</script>
Vue--入门篇的更多相关文章
- vue框架学习笔记(vue入门篇)
vue框架 - 构建用户界面的渐进式框架 - 采用自底层向上增量开发的设计 - 核心库只关注视图层 - 当与单文件组件和vue生态系统支持的库结合使用时,也完全能够为复杂的单页应用程序提供驱动 - v ...
- Vue入门篇
Vue-cli开发环境搭建 1. 安装nodejs 2. 设置缓存文件夹 $ npm config set cache "D:\vueProject\nodejs\node_cache&qu ...
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来,首先,请允许我长吸一口气!真没想到一份来自28岁老程序员 ...
- net core体系-web应用程序-4asp.net core2.0 项目实战（CMS）-第一章 入门篇-开篇及总体规划
.NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划 原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来 ...
- .NET Core实战项目之CMS 第三章 入门篇-源码解析配置文件及依赖注入
作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/9998021.html 写在前面 上篇文章我给大家讲解了ASP.NET Core的概念及为什么使用它,接着 ...
随机推荐
- vue规范规则
vue组件,数据通信,样式,JS的规范规则.对vue官方风格指南的总结归类并加入自己的规范,在团队小组中使用. 1.项目名/文件目录命名: kebab-case(- 连接): 项目名:vue-admi ...
- Java 枚举（enum）详解
概念: Java1.5发行版本中增加了新的引用类型--枚举类型(enum type).枚举类型是指由一组固定的常量组成合法值的类型.在Java虚拟机中,枚举类在进行编译时会转变成普通的Java类. 创 ...
- ThinkPhp学习
页面跳转 界面跳转是很常用的操作,所以基于ubuntu16系统,这周学习了ThinkPHP页面跳转和重定向. 页面跳转 系统的Think\Controller类内置了两个页面跳转方法err ...
- 2018-8-10-git-push-错误-hook-declined-
title author date CreateTime categories git push 错误 hook declined lindexi 2018-08-10 19:16:52 +0800 ...
- Netflix：我们为什么要将GraphQL引入前端架构？
作者|Artem Shtatnov译者|无明 在这篇文章中,我们将分享 Netflix 在这些应用程序的前端架构中引入 GraphQL 所积累的经验. 在内部,我们把用于管理广告创建和组装的主要应用程 ...
- Eigen ，MKL和 matlab 矩阵乘法速度比较
Eigen 矩阵乘法的速度 < MKL矩阵乘法的速度,MKL矩阵乘法的速度与matlab矩阵乘法的速度相差不大,但matlab GPU版本的矩阵乘法速度是CUP的两倍,在采用float数据类型 ...
- kubernetes部署metrics-server metrics-server-v0.3.4 pod报错
[root@hadoop02 ~]# kubectl logs metrics-server-v0.3.4-76db4dd54b-s4t2d -c metrics-server -n kube-sys ...
- BZOJ 4545
bzoj 4545 给定一个踹树,支持几种操作. 本质不同子串询问 加入子树 询问字符串\(S\) 在树上的出现次数. 好码好码 重点就是维护\(parent\) 树,考虑用\(LCT\)维护此树. ...
- 修改Tomcat的server.xml之后，tomcat 部署项目报错：Removing obsolete files from server... Could not clean server of obsolete files: null java.lang.NullPointerException
介个是你在clean tomcat的时候 文件没有clean清.(临时崩溃 系统宕机或其他原因)导致自己eclipse里的service.xml 在clean时没有copy一致. 解决方案: 1找到你 ...
- JavaScript 工作原理之十一－渲染引擎及性能优化小技巧
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十一章. 迄 ...