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的概念及为什么使用它,接着 ...
随机推荐
- Codeforces 492B Name That Tune ( 期望DP )
B. Name That Tune time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- 前端工程师的新选择WebApp
作为新一代移动端应用分发入口,小程序的趋势明朗化,竞争也在急剧激烈化.战线从手机 QQ.QQ 浏览器.支付宝.手机淘宝,华为,小米等九家手机厂商推出“快应用”,再拉到了谷歌的 Instant App ...
- jq轮播图实现
html基本框架如下: <div class="out"> <ul class="img"> <li><a href= ...
- 2018-12-25-win2d-图片水印
title author date CreateTime categories win2d 图片水印 lindexi 2018-12-25 10:37:52 +0800 2018-03-19 08:3 ...
- go语言从例子开始之Example23.通道缓冲
默认通道是 无缓冲 的,这意味着只有在对应的接收(<- chan)通道准备好接收时,才允许进行发送(chan <-).可缓存通道允许在没有对应接收方的情况下,缓存限定数量的值. 不支持缓冲 ...
- linux-mysql-install
版本是5.6之前的,安装MySQL步骤 yum install mysql-server 安装服务器端 yum install mysql-devel 安装服务器端 mysql配置文件/etc/my. ...
- Linux中的系统服务_02
Linux中的系统服务_02 1. 在linux增加服务后,如果要实现随着操作系统的启动而启动,需要是用chkconfig命令,加入到系统服务中. 但是对于的脚本的表头,需要增加如下内容 #!/bin ...
- C++11之列表初始化
1. 在C++98中,标准允许使用花括号{}来对数组元素进行统一的集合(列表)初始化操作,如:int buf[] = {0};int arr[] = {1,2,3,4,5,6,7,8}; 可是对于自定 ...
- c++ fork进程与同步锁
首先定义在多进程环境中的锁,采用读写锁,即可以同时读,但只能单独写. 头文件processLock.h #ifndef PROCESSLOCK_H #define PROCESSLOCK_H #inc ...
- paper 135：关于C#泛型的一些讲解
计划着要用一个月的时间把 C#语言Windows程序设计 搞定,现在是零零散散的知识点,日积月累吧!朋友们,看这里咯~呵呵 原文地址:http://www.blogjava.net/Jack2007 ...