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. ...
随机推荐
- mariadb galera群集故障记录
负责galera上执行删除语句 delete from t1 where group_id= and group_id=; 执行后,群集破坏,除了主节点存活,其他俩个节点全都停掉. 查看galera的 ...
- locust性能测试脚本模板
locust性能测试脚本模板 #!/usr/bin/env python # -*- coding: utf-8 -*- import time from locust import HttpLocu ...
- Visual Studio 2019更新到16.1.4
Visual Studio 2019更新到16.1.4 此次更新仍然是修复bug为主,涉及到Xcode 11无法启动模拟器.Xamarin.Android SDK 9.3.0.23的调试bug.
- vim卡死
使用vim时,如果你不小心按了 Ctrl + s后,你会发现不能输入任何东西了,像死掉了一般,其实vim并没有死掉,这时vim只是停止向终端输出而已,要想退出这种状态,只需按Ctrl + q 即可恢复 ...
- weui 导航悬浮固定
<style> .none{display: none} #toolbar { display: flex; justify-content: center; align-items: c ...
- 【Mybatis】MyBatis之缓存（七）
MyBatis缓存介绍 Mybatis 使用到了两种缓存:一级缓存(本地缓存.local cache)和二级缓存(second level cache). 一级缓存:基于PerpetualCache ...
- Qt编写气体安全管理系统25-位置调整
一.前言 位置调整功能,以前是直接写在设备按钮这个自定义控件类中,核心就是安装事件过滤器,识别鼠标按下.鼠标移动.鼠标松开,这三个event,做出相应的处理即可,后面发现这个功能其实很多自定义控件或者 ...
- npm publish 一直报错 404
在封装 zswui react ui 组件库的时候,尝试了下 github的 packages 包设置,然后就给自己挖坑了. zswui 这是一个从零开始配置,实现组件开发测试的项目. 因为设置 ...
- API SendMessage 带参数
代码未测试 [DllImport("USER32", EntryPoint = "SendMessage", CharSet = CharSet.Auto, S ...
- 阿里云 maven仓库地址配置
1. maven 配置文件配置settings.xml中设置mirror节点 <mirror> <id>nexus-aliyun</id> <mirrorOf ...