Vue使用指南(一)
Vue
Vue:前台框架
渐进式JavaScript框架
渐进式：vue可以控制页面的一个局部，vue也可以控制整个页面，vue也能控制整个前端项目
-- 根据项目需求，来决定vue控制项目的程度
使用
1.下载：https://vuejs.org/js/vue.min.js
2.导入vue.js
3.在自定义的script标签中创建vue对象
4.用vue对象来控制页面内容
vue的优点
'''
单页面web应用
数据驱动
数据的双向绑定
虚拟DOM
'''
挂载点与数据的渲染
<body>
<div id="app">
<!-- 插值表达式：插值表达式中出现的名字代表vue变量 -->
<div class="root">{{ abc }}</div>
<div class="main">{{ xyz }}</div>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
// 挂载点：vue对象通过el参数(挂载点)与页面结构建立联系，vue对象与页面控制的结构应该是一对一关系，所以挂载点选择id作为唯一标识
el: '#app',
// 在挂载点插值表达式中出现的名字是变量，需要vue对象通过data提供
data: {
abc: '内容',
xyz: 3.14
}
})
</script>
vue实例
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
// vue实例(对象)
var app = new Vue({
el: '#app',
data: {
msg: "message"
}
});
</script>
<script>
// 如何访问 "message"
console.log(app);
console.log(app.$el);
// vue的变量都是以$开头
console.log(app.$data.msg);
// vue实例(对象)就是挂载点
// app找到new Vue()实例再找到页面结构id=app，然后直接访问实例中的变量
console.log(app.msg)
</script>
实例的methods
<div id="app">
<!-- v-on来为事件绑定方法，事件用 :事件名 标注 -->
<!-- 语法：v-on:事件名 = "事件变量" -->
<!-- 事件变量：由vue实例的methods提供 -->
<button v-on:click="btnClick">{{ msg }}</button>
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: "按钮"
},
methods: {
btnClick: function () {
alert('点击事件')
}
}
});
</script>
案例：通过事件修改标签样式
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 通过不同的类名控制着一套css样式 */
.btn {
width: 100px;
height: 40px;
background: orange;
}
.botton {
width: 200px;
height: 80px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind来为属性绑定变量，属性用 :属性名 标注 eg: :style :class :id -->
<!-- 语法：v-bind:属性名 = "属性变量" -->
<!-- 事件变量：由vue实例的data提供 -->
<button v-on:click="btnClick" v-bind:style="my_style" v-bind:class="my_cls">{{ msg }}</button>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: "按钮",
my_style: {
// background: 'transparent'
},
my_cls: 'btn'
},
methods: {
btnClick: function () {
// console.log(this.my_style.background)
// this.my_style.background = 'yellow';
// 修改类名就能直接对应一套css样式
if (this.my_cls == 'btn') {
this.my_cls = 'botton'
} else {
this.my_cls = 'btn'
}
}
}
});
</script>
</html>
实例的computed
# computed功能：将function封装给一个变量，通过该变量就可以得到该function的返回值
# 应用场景：一个变量(name)依赖于 多个变量(first_name + last_name)的值
<div id="app">
<!-- v-model就是为表单元素 value属性 绑定变量 -->
<p>
姓：<input type="text" placeholder="姓" v-model="first_name">
</p>
<p>
名：<input type="text" placeholder="名" v-model="last_name">
</p>
<p>
<!-- 插值表达式中可以书写 变量表达式 -->
姓名：<span class="span">{{ name }}</span>
</p>
</div>
<script src="js/vue.min.js"></script>
<script>
// vue实例(对象)
var app = new Vue({
el: '#app',
data: {
first_name: '',
last_name: '',
},
computed: {
name: function () {
if (this.first_name == '' && this.last_name == '') {
return '姓名'
}
return this.first_name + this.last_name
}
}
});
</script>
实例的watch方法
# watch是用来监听变量的，当监听的变量的值一旦发生变化，就会触发监听的函数
# 应用场景：多个变量(first_name、last_name)依赖于一个变量(name)
<div id="app">
<p>
姓名：<input type="text" placeholder="姓名" v-model="name">
</p>
<p>姓: {{ first_name }}</p>
<p>名: {{ last_name }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: "",
first_name: "姓",
last_name: "名",
},
watch: {
name: function () {
// eg: name = “张三”
this.first_name = this.name[0]; // 张
this.last_name = this.name[1]; // 三
}
}
});
</script>
实例的delimiters
<body>
<div id="main">
<!-- 查找表达式 {{ }} 符号与其他语言冲突，可以自定义表达式的符号 -->
<!-- 实例的 delimiters: ['左侧符号', '右侧符号'] -->
{{ msg }}{{{ msg }}}${ msg }
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
// vue实例(对象)
new Vue({
el: '#main',
data: {
msg: "信息"
},
// delimiters: ['{{{', '}}}'],
delimiters: ['${', '}'],
});
</script>
实例的生命周期钩子
# 学习目的：
# 钩子：满足某种条件被（系统）调用的方法
# 在一个vue实例，从创建到销毁，整个过程中或产生一些时间节点，这些时间节点都会回调一些指定名字绑定的方法，在这些函数中去完成特点时间点的业务功能
new Vue({
el: '#app',
data: {
msg: "message"
},
methods: {
fn: function () {
return '123'
}
},
beforeCreate: function () {
console.log('实例要被创建了');
console.log(this.msg)
},
created: function () {
console.log('实例已经创建了');
console.log(this.msg);
console.log(this.$el)
},
mounted: function () {
console.log('实例已经渲染到页面');
console.log(this.msg);
console.log(this.$el);
console.log(this.fn)
},
'生命周期钩子名': function () {
console.log('该时间点需要完成的业务逻辑');
},
});
Vue使用指南(一)的更多相关文章
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- Vue风格指南总结及对应ESLint规则配置
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/10906951.html,多谢,=.=~ 必要的:规避错误: 强烈推荐:改善可读性和开发体验: 推 ...
- 2019 Vue开发指南：你都需要学点啥？
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://dzone.com/articles/vue-development-in-2019 ...
- Vue 入门指南
英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连 ...
- Vue.js 指南-基础
Installation 可以使用的方式: script标签方式加载vue.js cdn https://unpkg.com/vue@2.0.5/dist/vue.js npm Introductio ...
- vue权威指南笔记02——对比v-if与v-show
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue权威指南笔记01——样式的设置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Vue实战指南之依赖注入（provide / inject）
案例 UI美眉说咱家的选项菜单太丑了,小哥哥能不能美化一下呀,洒家自然是说小意思啦~自定义一个select组件,so easy~ 简单粗暴型: <el-select v-model=" ...
- 3-1 vue生存指南 - todolist实现-数据渲染
由于Vue.js作者是中国人,会说汉语,所以国内生态会更好一点.Vue.js作者是尤雨溪,
- vue学习指南：第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
随机推荐
- locust性能测试脚本模板
locust性能测试脚本模板 #!/usr/bin/env python # -*- coding: utf-8 -*- import time from locust import HttpLocu ...
- 关于如何重写Controller和Service技术攻关文档
版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_39784756/articl ...
- 021 CSS高级特性
一:元素的显示与影藏 1.比较常见的单词 dispaly,visibility,overflow 2.display案例 如果影藏了,这个元素就看不见了,然后也不保留位置 <!DOCTYPE h ...
- springMVC Controller 参数映射
springMVC 对参数为null或参数不为null的处理 - 小浩子的博客 - CSDN博客https://blog.csdn.net/change_on/article/details/7664 ...
- Linux_CentOS 文件管理和目录管理
Linux 文件管理 1.创建文件 touch file1 2.删除文件 rm -rf file11 -r:递归的删除目录下面文件以及子目录下文件. -f:强制删除,忽略不存在的文件,从不给出提示 3 ...
- ISO/IEC 9899:2011 条款6.8.4——选择语句
6.8.4 选择语句 语法 1.selection-statement: if ( expression ) statement if ( expression ...
- 如何解决Access操作或事件已被禁用模式阻止
操作或事件已被禁用模式阻止.本来是Access安全设置的一部分,可以防止一些危险性的宏自动运行损坏数据,但是如果是自己在设计或是修改Access数据库的时候,这个就比较烦人了,一次次的提示,每次都需要 ...
- 谷歌Chrome浏览器 截取网页长图方法
Chrome浏览器: 1.按F12打开调试页面 2.按下ctrl + shift + p 3.输入命令 Capture full size screenshot 并回车 4.浏览器会自动截取整个网页内 ...
- ABAP DEMO ALVtree显示BOM层级
展示效果: *&---------------------------------------------------------------------* *& Report YCX ...
- Python - Django - ORM 外键操作
models.py: from django.db import models # 出版社 class Publisher(models.Model): id = models.AutoField(p ...