Vue介绍：vue导读2
一、实例中的成员
二、高级指令
三、组件初识
一、实例中的成员
# 计算computed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
<div id="app">
姓<input type="text" v-model="first_name">
<hr>
名<input type="text" v-model="last_name">
<hr>
<p>{{ first_name + " " + last_name }}</p>
<p>{{ full_name_fn() }}</p>
<!-- 一个变量的值依赖于多个变量的值 -->
<p>{{ full_name }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
first_name: "",
last_name: "",
},
methods: {
// 声明的是函数, 该函数必须手动调用
full_name_fn: function () {
return this.first_name + " " + this.last_name
}
},
computed: {
// 声明变量full_name, 该变量的值等于后方函数的返回值
// 函数中包含的所有vue变量值只要有发生变化的系统就会调用该函数
full_name: function () {
return this.first_name + " " + this.last_name
}
}
})
</script> </html>
# watch监听
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
<div id="app">
姓名<input type="text" v-model="full_name">
<hr>
<p>{{ first_name }}</p>
<hr>
<p>{{ last_name }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
full_name:"",
first_name:"",
last_name:"",
},
watch:{
// watch只是对已有的变量进行值变化的监听，一旦发现值变化，系统自动回调监听变量后的函数
// 后方函数和前方变量只有数据变化的监听绑定关系，没有值相关的联系
full_name: function () {
arr = this.full_name.split(" ");
this.first_name = arr[0];
this.last_name = arr[1];
}
} })
</script> </html>
二、高级指令
# 条件指令渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
<style>
.wrap{
width: 300px;
}
.box{
width: 100px;
height: 100px;
} .red{
background-color: red;
float: left;
} .orange{
background-color: orange;
float:right;
}
</style>
</head>
<body>
<div id="app">
<button @click="rAction">red切换</button>
<button @click="oAction">orange切换</button>
<div class="wrap">
<!--v-if 值为false时，不会被渲染-->
<!--了解：key由vue控制的属性key值需要唯一标识，因为key的值就是vue对该组件对内在中建立缓存的可以-->
<div class="box red" v-if="r_show" :key="key"></div>
<!--v-show 值为false时，以display：none被渲染-->
<div class="box orange" v-show="o_show"></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
r_show:true,
o_show:true,
}, methods:{
rAction:function () {
this.r_show = !this.r_show
},
oAction:function () {
this.o_show = !this.o_show
}
}
})
</script> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
<style>
.box{
height:100px;
}
.r{background-color: red}
.y{background-color: yellow}
.b{background-color: blue} </style>
</head>
<body>
<div id="app">
<ul>
<li @click="rfn">红</li>
<li @click="yfn">黄</li>
<li @click="bfn">蓝</li>
</ul>
<div class="box r" v-if="tag==0" ></div>
<div class="box y" v-else-if="tag==1"></div>
<div class="box b" v-else></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
tag:0
}, methods:{
rfn:function () {
this.tag = 0
},
yfn:function () {
this.tag = 1
},
bfn:function () {
this.tag = 2
},
}
})
</script> </html>
条件指令案例
#循环指令渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
<div id="app">
<ul>
<li>{{ ls[0] }}</li>
<li>{{ ls[1] }}</li>
<li>{{ ls[2] }}</li>
<li>{{ ls[3] }}</li>
<li>{{ ls[4] }}</li>
</ul>
<ul>
<li v-for="(ele,index) in ls">{{ ele }} {{ index }}</li>
</ul>
<ul>
<li v-for="(value,key,index) in dic">{{ key }} {{ value }} {{ index }}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
ls: ['张三', '李四', '王五', '赵六', '钱七'],
dic:{
name:'Richard.wu',
age:31,
gender:'man'
}
}, })
</script> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
<div id="app">
<form action="">
<input type="text" v-model="msg">
<button type="button" @click="fn">留言</button>
</form>
<ul>
<li v-for="(m,i) in msgs" @click="deleteAction(i)">{{ m }}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg:"",
msgs:["初始留言"]
},
methods:{
fn:function(){
if(this.msg){
// this.msgs.push(this.msg)//在后添加
this.msgs.unshift(this.msg);//在前添加
this.msg="";
}
},
deleteAction:function(index){
console.log(index);
// 从什么索引开始，操作多少位，操作什么
this.msgs.splice(index,1)
}
} })
</script> </html>
循环指令渲染案例
三、组件初识
# 组件初识
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
//每个组件均有自身的模板tempalate，根组件的模板就是挂载点
new Vue({
//根组件一定需要挂载点（否则无法渲染到页面中），一般情况下，根组件template就取挂载点，不需要自定义
el: "#app",
data: {
msg:"信息"
},
//template就是组件的html架构
//每个组件模板只能拥有一个根标签
template:"<div><p>中午请客，师妹告诉我今晚不回去还想给我三个耳光，我当时就拒绝了，休想坑我第二顿</p></div>"
})
</script> </html>
# 局部组件
<body>
<div id="app">
<abc></abc>
<abc></abc>
<abc></abc>
</div>
<hr>
<div id="main">
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 局部组件
var localTag = {
// 子组件的数据具有作用域，以达到组件的复用, 每一个复用的组件具有自身独立的一套数据
data: function () {
return { // 返回值是一个数据字典(一套数据)
count: 0
}
},
template: "<div @click='fn'>点击{{ count }}次</div>",
methods: {
fn: function () {
this.count += 1;
}
}
} // app根组件
new Vue({
el: "#app",
// 注册
components: {
'abc': localTag
}
})
// main根组件
new Vue({
el: "#main",
components: {
// localTag
'local-tag': localTag
}
})
</script>
Vue介绍：vue导读2的更多相关文章
- Vue.js是什么，vue介绍
Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...
- Vue介绍：vue导读1
一.什么是vue 二.如何在页面中使用vue 三.vue的挂载点 四.vue的基础指令 一.什么是vue 1.什么是vue vue.js十一个渐进式javascript框架 渐进式:vue从控制页面中 ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- Vue学习笔记之Vue介绍
vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...
- vue——介绍和使用
一.vue介绍 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. ...
- Vue介绍以及模板语法-插值
1.Vue的介绍 Vue是一套用于构建用户界面的渐进式框架. 注意:Vue是一个框架,相对于jq库来说,是由本质的区别的:https://cn.vuejs.org/ Vue不支持IE8及一下版本,因为 ...
- Vue小白篇 - Vue介绍
Vue ?啥是Vue?能干嘛? vue 的介绍 Vue 是一套用于构建用户界面的 渐进式框架 ,与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 前端三大框 ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
随机推荐
- centos7 vim环境优化
centos7默认是使用vi,而不是使用vim,所以,我们需要修改一下vi的别名,并且,我们使用neovim,vi毕竟还是有很多功能比较原始 所以 yum install neovim -ycat & ...
- 工具 --- Git使用
创建远程仓库 Github 首相在GitHub网站创建一个仓库:右上角加号➕,选择new repository 然后创建编辑仓库:名称.说明.是否公开.语言.分支风格等信息.然后创建. 复制仓库地址 ...
- 【计算机视觉】Opencv中的Face Detection using Haar Cascades
[计算机视觉]Opencv中的Face Detection using Haar Cascades 标签(空格分隔): [图像处理] 声明:引用请注明出处http://blog.csdn.net/lg ...
- 在HTML5 中使用 kindeditor 的方法
1.打开:http://kindeditor.net/ke4/examples/default.html 2.查看源代码,另存为 3.打开http://kindeditor.net/demo.php, ...
- 洛谷 题解 P1353 【[USACO08JAN]跑步Running】
动态规划 状态 dp[i][j]表示第i分钟疲劳值为j的最大值 初始 全部都为一个最小值"0" 转移 考虑休息和走 如果当前疲劳值比时间要大,显然不可能出现这种情况 如果比时间小 ...
- 【Cisco】实现同一个路由器一个端口用动态路由，另一个端口用静态路由
一.先构建以下网络图: 准备三台路由器,三台交换机,三台主机,连接所有设备并配置端口IP和网关,DCE端口的时钟频率都设置为64000.
- [Cometoj#3 C]子序列子序列子序列..._动态规划_数论
子序列子序列子序列... 题目链接:https://cometoj.com/contest/38/problem/C?problem_id=1542 数据范围:略. 题解: 神仙题,感觉这个题比$D$ ...
- SQLite进阶-15.触发器
目录 触发器(Trigger) 触发器(Trigger)的要点: 触发器应用 查看触发器 删除触发器 触发器(Trigger) 触发器(Trigger)是数据库的回调函数,它会在指定的数据库事件发生时 ...
- TypeScript的变量声明
1.全新的变量声明方式 let和const是JavaScript ES6中新添加的变量声明方式.let在很多方面与var是相似的,但是它可以避免一些在JavaScript里常见一些问题. 而const ...
- VS code 的使用
VS code 是一个非常不错的代码编辑器.它不依赖与任何编译器或者解释器,但却能高效的利用第三方编译器或解释器来给用户提供良好的代码编写环境. 我喜欢VS code的三点,丰富强大的插件,快捷的语法 ...