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的概念及为什么使用它,接着 ...
随机推荐
- 团队作业-Bata冲刺第一天
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...
- Ubuntu命令行操作
一.文件/文件夹管理 ls 列出当前目录文件(不包括隐含文件) ls -a 列出当前目录文件(包括隐含文件) ls -l 列出当前目录下文件的详细信息 cd .. 回当前目录的上一级目录 cd - 回 ...
- JavaScript 下载大文件解决方案（Blob+OjbectURL）
结合Blob和OjbectURL实现更大的文件下载: var a = document.createElement('a'); var txt = '.....content....'; for(va ...
- std::list erase
conns.erase(remove(conns.begin(), conns.end(), conn), conns.end());
- jquery 选项卡切换 带背景图片
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- webpack 学习三 模式
开发环境(development)和生产环境(production)的构建目标差异很大.在开发环境中,我们需要具有强大的.具有实时重新加载(live reloading)或热模块替换(hot modu ...
- 割点的tarjan算法模板
基本思路: 朴素的思想是删除每一个点,然后去dfs,这样无疑会爆炸 换一种思路,怎样判断是割点呢,如果是根节点的话毫无疑问只要看子树的数目,但是如果不是根节点呢,不知大牛是怎样想到的 利用两个数组df ...
- 19.并发下的ArrayList、HashMap,Integer加锁问题
import java.util.ArrayList; import java.util.Vector; /** * 并发下的ArrayList */ public class ArrayListMu ...
- JavaSE---Runtime类
1.概述 1.1 Runtime类 代表 java程序运行时环境: 1.2 Runtime类 提供的类方法: getRuntime():获取Runtime实例: gc():通知垃圾回收器回收资源: ...
- MariaDB 删除表
在本章中,我们将学习删除表. 表删除很容易,但记住所有删除的表是不可恢复的. 表删除的一般语法如下 - DROP TABLE table_name ; 存在执行表删除的两个选项:使用命令提示符或PHP ...