Vue使用指南(二)
'''
1.指令 *****
文本指令
属性指令
方法(事件)指令
表单指令
条件指令
循环指令 2.组件 ***
局部组件
全局组件
父子组件间的交互
'''
文件指令
<body>
<div id="app">
<!-- 1) 插值表达式 -->
<p>{{ msg }}</p>
<p>{{ 1 + 2 * 3 + '条' + msg }}</p>
<!-- 2) v-text -->
<p v-text="msg"></p>
<p v-text="'msg'"></p>
<!-- 3) v-html：能解析html代码语法 -->
<p v-text="html_msg"></p>
<p v-html="html_msg"></p>
<!-- 4) v-once：结合插值表达式来使用，变量值一旦被初始化赋值后就不会再改变 -->
<input type="text" v-model="val">
<p>{{ val }}</p>
<p v-text="val"></p>
<p v-html="val"></p>
<p v-once>{{ val }}</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '你是p',
html_msg: '<b>html语法代码是否解析</b>',
val: '000'
}
})
</script>
属性指令
# 1.v-bind:属性名="变量"
# 2.简写=> :属性名="变量"
# 3.:class="变量" | :class="{类名:is_able}" | :class="[类1变量, ..., 类n变量,]"
<head>
<meta charset="UTF-8">
<title>属性指令</title>
<style>
.cls_a {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.cls_b {
text-align: center;
line-height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- 属性指令：v-bind -->
<div id="app">
<!-- 1) 自定义属性绑定变量 -->
<p v-bind:abc="a"></p>
<!-- 2) title属性 -->
<p title="鼠标悬浮的文本提示">这是一个p段落</p>
<p v-bind:title="my_title">这是一个p段落</p>
<!-- 3) class属性 -->
<!-- 重点：v-bind: 可以简写为 : -->
<!-- my_class可以被任意赋值 -->
<p :class="my_class">这是一个p段落</p>
<!--{类名:类是否起作用, ...} 类是否起作用 写的是变量，变量的值为true或false-->
<!--应用场景：通过一个变量真假控制一个类名是否起作用-->
<p :class="{x:1, y:0, z:is_able}">这是一个p段落</p>
<!--[类名1, ..., 类名n]: 多类名，每一个类名既可以是字符串常量也可以是变量-->
<p :class="[o, p, q, 'oqp']">这是一个p段落</p>
<!--多类名综合使用-->
<p :class="[o, p, q, 'oqp', {k: true}, {h: false}]">这是一个p段落</p>
<!-- 4) style属性 -->
<p :style="my_style">这是一个p段落</p>
<p :style="{color: 'red', backgroundColor: yellow}">这是一个p段落</p> </div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
a: 'A',
my_title: '鼠标悬浮的文本提示',
my_class: 'cls_a cls_b',
is_able: true,
o: 'O',
p: 'P',
q: 'Q',
my_style: {
color: 'red',
// 'font-size': '30px'
fontSize: '30px'
},
yellow: 'greenyellow'
}
})
</script>
事件指令
# 指令：v-on:事件名="方法变量"
# 简写：@事件名="方法变量"
# 简写：@事件名="方法变量()" => 不是方法的调用，而是用于传参
# 简写：@事件名="方法变量('普通参数', $event)" => $event是事件参数，可以通过它得到鼠标点击的相关信息
<body>
<!-- 指令：v-on:事件名="变量" -->
<!-- 简写：@事件名="变量" -->
<div id="app">
<p v-on:click="fn1" :style="{color: m_c}">{{ msg }}</p>
<p @mouseover="fn2" @mouseleave="fn3" @mousedown="fn4" @mouseup="fn5">{{ msg }}</p>
<!--事件需要参数时-->
<!-- 注意：事件绑定 方法名() 等价 方法名，不能调用方法，而是作为传参的标志 -->
<p @click="func('abc')">{{ msg }}</p>
<!--类别django传参的应用场景，可以标识具体点击的是哪个li-->
<!--{% for %}-->
<!--<li @click="func({{forloop.index}})"></li>-->
<!--{% end for%}-->
<!--传入事件对象-->
<p @click="func1($event)">{{ msg }}</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '你是p',
m_c: 'red'
},
methods: {
func1: function (ev) {
console.log(ev);
// 数据点击页面的点击点
console.log(ev.clientX);
console.log(ev.clientY);
},
func: function (txt) {
this.msg = txt
},
fn1: function () {
if (this.m_c == 'red') {
this.m_c = 'blue'
} else {
this.m_c = 'red'
}
},
fn2: function () {
this.msg = '鼠标悬浮了'
},
fn3: function () {
this.msg = '鼠标离开了'
},
fn4: function () {
this.msg = '鼠标按下了'
},
fn5: function () {
this.msg = '鼠标抬起了'
}
}
})
</script>
表单事件
<body>
<div id="app">
<!-- 指令：v-model="变量" -->
<form action="" method="get">
<!-- 1) 数据的双向绑定 -->
<input type="text" v-model="msg" name="usr">
<input type="password" v-model="msg" name="pwd">
<!-- 2) 单选框: value必须设置初值，v-model变量值要与单选框的value值统一 -->
<p>
男:<input type="radio" name="sex" value="male" v-model="sex_val">
女:<input type="radio" name="sex" value="female" v-model="sex_val">
</p>
<!--3)单一复选框-->
<p>
<!-- v-model绑定的变量值与true-value|false-value统一 -->
<!-- true-value|false-value默认值为 true | false -->
是否同意条款:<input type="checkbox" name="agree" v-model="agree_val"
true-value="同意" false-value="不同意">
</p>
<!-- 4) 多复选框 -->
<!-- v-model绑定的变量是存放多复选框value的数组(列表) -->
<p>
爱好:
<input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
<input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
<input type="checkbox" value="不挑" name="cless" v-model='more_val' />
</p>
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '',
sex_val: 'female', // 默认value="female"的单选框被选中
agree_val: '不同意',
more_val: ['喜好男的', '喜好女的']
}
})
</script>
条件指令
<head>
<meta charset="UTF-8">
<title>文本指令</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: darkgray;
}
.pg1 { background-color: red; }
.pg2 { background-color: yellow; }
.pg3 { background-color: blue; }
</style>
</head>
<body>
<div id="app">
<!-- v-if与v-show的变量值都是bool，控制着显隐 -->
<!-- v-if隐藏时标签不被渲染，v-show隐藏时标签渲染，用display:none来隐藏 -->
<!-- 特殊属性key是vue在内存中建立缓存的标志, 来优化渲染的效率 -->
<p v-if="is_if" key="my_if">v-if的显示与隐藏</p>
<p v-show="is_show" key="my_show">v-show的显示与隐藏</p>
<p>
<button @click="btn_click('pg1')">红</button>
<button @click="btn_click('pg2')">黄</button>
<button @click="btn_click('pg3')">蓝</button>
<div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div>
<div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div>
<div class="box pg3" v-else key="pg3"></div>
</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_if: true,
is_show: true,
pg: 'pg1'
},
methods: {
btn_click: function (pg_num) {
this.pg = pg_num
}
}
})
</script>
循环指令
<head>
<meta charset="UTF-8">
<title>文本指令</title>
<style>
p {
padding-left: 30px;
}
</style>
</head>
<body>
<div id="app">
<p>{{ array[1] }}</p>
<p>{{ person['age'] }}</p>
<div>循环array</div>
<p v-for="v in array">{{ v }}</p>
<div>带索引循环array</div>
<p v-for="(v, i) in array">{{ v }}索引是{{ i }}</p>
<div>循环dict</div>
<p v-for="v in person">{{ v }}</p>
<div>带key循环dict</div>
<p v-for="(v, k) in person">{{ v }}键是{{ k }}</p>
<div>带key带索引循环dict</div>
<p v-for="(v, k, i) in person">{{ v }}键是{{ k }}索引是{{ i }}</p>
<ul v-for="person in persons">
<!--{{ person }}-->
<li v-for="(v, k) in person">{{ k }}: {{ v }}</li>
</ul>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
array: ['iso', 'android', 'winPhone'],
person: {'name': 'Jobs', 'age': 88, 'gender': '男'},
persons: [
{'name': 'Jason', 'age': 58},
{'name': 'Jerry', 'age': 68},
{'name': 'Owen', 'age': 17},
]
}
})
</script>
前端array的操作
<script>
arr = [1, 2, 3, 4, 5];
console.log(arr);
// 从index开始往后操作length长度，替换为args
// arr.splice(index, length, args);
// arr.splice(2, 3, 9, 9); // [1, 2, 9, 9] 替换
// arr.splice(2, 3); // [1, 2] 删除
arr.splice(2, 0, 8); // [1, 2, 8, 3, 4, 5] 插入
console.log(arr);
</script>
留言案例
<body>
<div id="app">
<input type="text" v-model="txt">
<button @click="send_msg">留言</button>
<ul>
<li v-for="(msg, i) in msg_arr" @click="delete_msg(i)">{{ msg }}</li>
</ul>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
txt: '',
// msg_arr: ['初始留言1', '初始留言2']
msg_arr: []
},
methods: {
send_msg: function () {
// this.txt
// this.msg_arr
if (this.txt) {
this.msg_arr.push(this.txt);
this.txt = ''
}
},
delete_msg: function (index) {
this.msg_arr.splice(index, 1)
}
}
})
</script>
个人学习笔记：
1.指令：
文本指令：
插值表达式属于文本指令
v-text='变量'
v-html='变量'，能解析html代码语法
v-once：一次赋值终身不能改变,<p v-once>{{}}</p>，结合插值表达式来使用，变量值一旦被初始化赋值后就不会再改变 属性指令：v-bind
写在标签后面的变量即为属性
1.自定义属性绑定变量:<p v-bind:abc='a'></p>
2.title属性，<p v-bind:title='鼠标悬浮的文本提示'></p>
3.class属性，v-bind:可以简写为:,<p:class='myclass'></p>
另一种写法 :class='{x:y}',x是类名，y表示是否起作用，0为不起作用，1为起作用。{类名:类是否起作用}类是否起作用，写的是变量，变量的值为True或false，通过一个变量真假控制一个类名是否起作用
第三种写法:[类名1,类名2,.....,类名n]，多类名，每一个类名既可以是字符串常量也可以是变量
混用::class=[o,p,'111',{k,1}]
4.style属性: :style='my_style',注意在css里面的连接语法可以换成小驼峰的语法， 方法(事件)指令
v-on:事件名='变量'，简写@事件名='变量'
mouseover:鼠标悬浮
mouseleave:鼠标离开
mousedown:鼠标按下
mouseup:鼠标松开 事件需要参数时:
注意事件绑定 方法名()等价方法名。不会调用方法，而是作为传参的标志 表单指令：
v-model="变量"
数据的双向绑定,绑定同一个值，改变一个，全部改变
单选框，必须要明确value，v-model只是指定默认值，value必须设置初值，v-model要与value的值统一
单一复选框:v-model值为真选中，值为假，不选中，如果value在true-value里面为真，在false-value为假 多复选框:v-model的变量为存放多复选框value的数组 条件指令
v-if ，v-else-if,v-else
v-show
v-if与v-show的变量值都是bool，控制着显隐，v-if隐藏时标签不会被渲染，v-show隐藏时标签渲染，用display:none隐藏
key特殊属性key是vue在内存中建立缓存的标志，来优化渲染的效率 循环指令
v-for
v-for='n in array'
带索引循环v-for='(v,i) in array' 循环dict:优先循环出value 斗篷指令
2.组件:
局部组件，全局组件，父子组件间的交互
笔记
Vue使用指南(二)的更多相关文章
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- P6 EPPM R16.1安装与配置指南(二)
P6 EPPM R16.1安装与配置指南(一) http://www.cnblogs.com/endv/p/5634620.html P6 EPPM R16.1安装与配置指南(二) 环境变量配置 新建 ...
- Swift语言指南(二)--语言基础之注释和分号
原文:Swift语言指南(二)--语言基础之注释和分号 注释 通过注释向自己的代码中注入不可执行的文本,作为你自己的笔记或提示.Swift编译器运行时会忽略注释. Swift的注释与C语言极其相似,单 ...
- Vue小项目二手书商城：（四）详情页和购物车（emit、prop、computed）
实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...
- Vue小项目二手书商城：（三）前端渲染数据
实现内容: axios取到的数据在前端使用(父子组件各自应该怎么使用) 一.简单使用(在哪取在哪用) 1.在App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop ...
- Vue小项目二手书商城：（二）axios前后端数据交互
实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...
- Vue小项目二手书商城：（一）准备工作、组件和路由
本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...
- App架构师实践指南二之App开发工具
App架构师实践指南二之App开发工具 1.Android Studio 2.编译调试---条件断点.右键单击断点,在弹出的窗口中输入Condition条件.---日志断点.右键单击断点,在弹 ...
- Foxmail邮箱最新应用指南二
Foxmail邮箱最新应用指南二 1.打开Foxmail主界面—工具—账号管理,或者鼠标右击任何已有账号—属性,弹出账号管理窗口,点击左下角的“新建”按钮: 2.输入邮箱地址,下一步→选择邮箱类型(I ...
随机推荐
- 【内功修炼】"裁员潮",“中年危机”，该如何战胜你的焦虑
"裁员"."中年危机"这些曾经看上去比较遥远的词汇,最近开始频繁出现在各种文章和新闻中,个人觉得这主要由两方面原因造成: 近两年,国内外经济形势严峻(更有经济学 ...
- JS-SDK相关参考
原文: https://www.cnblogs.com/wuhuacong/p/5482848.html https://www.cnblogs.com/29boke/p/5483599.html
- nginx中的超时配置
nginx.conf配置文件中timeout超时时间设置 client_header_timeout 语法 client_header_timeout time默认值 60s上下文 http serv ...
- Android点击事件通过kotlin几种实现方式总结
一般来说,Android点击事件通过kotlin有以下几种实现方式: 1.通过全局接口View.OnClickListener实现,代码如下 //class MainActivity : AppCom ...
- Intellij IDEA 2019 最新优化配置
Intellij IDEA 2019 最新优化配置 转发自Dimple’s Blog 摘要: 之前在CSDN上写了一点关于IDEA的优化配置之类的文章,有些图片失效了,很多人都希望会有继续更新 ...
- [原]error LNK2005:"XXX已经在 XXX.obj 中定义 使用 /FORCE（强制文件输出）暴力解决
参考:https://blog.csdn.net/LG1259156776/article/details/80828720 https://blog.csdn.net/cai18381306175/ ...
- Oracle的存储过程基本写法
转: Oracle的存储过程基本写法 目录 1.1,Oracle存储过程简介: 1.2,创建存储过程的语法: 2.0,游标的使用.看到的一段解释很好的概念,如下: 回到顶部 1.1,Oracle存储过 ...
- OWASP ZAP使用教程
一.安装 Windows下载下来的是exe的,双击就可以了! Linuxg下载下来的不是.sh就是tar.gz,这个就更加简单了. 唯一需要注意的是: Windows和Linux版本需要运行Java ...
- Python手册 3.7
Python手册 3.7 下载地址:https://pan.baidu.com/s/1dPzwwP3ehnyLUNWTsB2QJg 关注微信公众号获取提取码: 输入:py99 获取提取码
- 【翻译】Flink Table Api & SQL ——Streaming 概念
本文翻译自官网:Streaming 概念 https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/table/streamin ...