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. ...
随机推荐
- 类别不平衡问题之SMOTE算法（Python imblearn极简实现）
类别不平衡问题类别不平衡问题,顾名思义,即数据集中存在某一类样本,其数量远多于或远少于其他类样本,从而导致一些机器学习模型失效的问题.例如逻辑回归即不适合处理类别不平衡问题,例如逻辑回归在欺诈检测问题 ...
- C# ffmpeg 视频处理格式转换具体案例
C# ffmpeg 视频处理格式转换 C# ffmpeg 视频处理格式转换avi到MP4格式 1.代码如下: using System;using System.Diagnostics; namesp ...
- Django HttpResponse与JsonResponse
本文链接:https://blog.csdn.net/mr_hui_/article/details/86498509 我们编写一些接口函数的时候,经常需要给调用者返回json格式的数据,那么如何返回 ...
- You are using the runtime-only build of Vue where the template compiler is not available. Either pre
在升级脚手架到vue-cli3.0版本的时候出现了这个报错: [Vue warn]: You are using the runtime-only build of Vue where the tem ...
- java的List中使用filter过滤出符合特定条件的元素List
在实际开发中,经常需要把一个列表中的元素,按照特定条件过滤出来,放到一个新的列表中.本文给出了几个例子,来描述解决这个问题的方法. 我们假设有一个书的List,需要找出其中id分别是3.6.8.9的书 ...
- nginx报警：nginx: [warn] could not build optimal server_names_hash, you should increase either server_names_hash_max_size: 512 or server_names_hash_bucket_size: 64; ignoring server_names_hash_bucket_size
date: 2019-08-12 16:33:05 author: headsen chen notice :个人原创 告警现象: 解决办法:在http的部分添加hash缓冲值 测试:如下图, ...
- JDK动态代理在RPC框架中的应用
RPC框架中一般都有3个角色:服务提供者.服务消费者和注册中心.服务提供者将服务注册到注册中心,服务消费者从注册中心拉取服务的地址,并根据服务地址向服务提供者发起RPC调用.动态代理在这个RPC调用的 ...
- 【转载】 卷积神经网络（Convolutional Neural Network，CNN）
作者:wuliytTaotao 出处:https://www.cnblogs.com/wuliytTaotao/ 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可,欢迎 ...
- 阿里云服务器Svn-Server无法连接
总结:关于阿里云服务器Svn-Server无法连接,Svn-Server的配置问题 2018年07月09日 11:51:08 周同学的博客 阅读数:355 最近在使用阿里云服务器时,SQL SER ...
- Python高级笔记（八）with、上下文管理器
1. 上下文管理器 __enter__()方法返回资源对象,__exit__()方法处理一些清除资源 如:系统资源:文件.数据库链接.Socket等这些资源执行完业务逻辑之后,必须要关闭资源 #!/u ...