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的概念及为什么使用它,接着 ...
随机推荐
- 基于Windows 7（本地）和CentOS7.6（云端）的Minecraft服务器（无Forge/有Forge）搭建方法
炎炎夏日中想和小伙伴们开黑的同学可以进来看一下了,本教程教你搭建基于两个平台的Minecraft服务器,这里我以Minecraft 1.11.2版本为例给大家讲解搭建流程.其中有Forge版本可以加入 ...
- 力扣——remove element（删除元素） python实现
题目描述: 中文: 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) ...
- 回收子进程——wait/waitpid 与 信号机制
孤儿/僵尸进程——回收子进程 参考博客:https://blog.csdn.net/qq_35396127/article/details/78725915 :https://www.cnblogs. ...
- 本地代码上传至git仓库
1.进入项目文件夹,初始化 git init 2.添加文件到版本库 git add . 3.提交文件 git commit -m "初次提交" 4.关联远程仓库 git remot ...
- python-列表list- 元组(tuple)- 集合（set）-字典(dict)-实例代码
python 经常用的数据类型还有列表list- 元组(tuple)- 集合(set)-字典(dict),以下是这四种类型用法的简单示例. 1.列表list [ ] 元素可变 , 有序 ...
- C++11新特性之 Move semantics(移动语义)
https://blog.csdn.net/wangshubo1989/article/details/49748703 这篇讲到了vector的push_back的两种重载版本,左值版本和右值版本．
- 二分图最大权匹配——KM算法
前言 这东西虽然我早就学过了,但是最近才发现我以前学的是假的,心中感慨万千(雾),故作此篇. 简介 带权二分图:每条边都有权值的二分图 最大权匹配:使所选边权和最大的匹配 KM算法,全称Kuhn-Mu ...
- TIM4定时器功能设置
一.初始化过程 /*********************************************************************** 利用TIM4定时器作为计时,每个0.1 ...
- window环境mysql卸载不干净
停止MySQL服务1添加删除程序中卸载MySQL2到安装目录删除MySQL3删除:C:\Documents and Settings\All Users\Application Data\MySQL ...
- 2019 TCO Round 1B——[ 状压DP ]
第一题是 EllysSki . 题意:给n个数,求两个方向的最长递减区间. 可以O(n). #include<cstdio> #include<cstring> #includ ...