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. ...
随机推荐
- svn更新，清理，上传时出现乱码解决方案
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_35703883/articl ...
- NPVariant -js传递给NPAPI插件参数在firefox和chrome需要采用不同的获取方式
原帖地址:http://blog.sina.com.cn/s/blog_4c6631790102wd1o.html 整数参数 typedef struct _NPVariant { NPVariant ...
- MiniUI增删改查操作及确认按钮
原文:https://blog.csdn.net/codezdx/article/details/81565043 1.动态创建列:尽量不要直接在html文件里创建列,动态设置在js文件里方面添加.修 ...
- （信贷风控九）行为评分卡模型python实现
python信用评分卡建模(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_ca ...
- C# Area 双重路由
在WebApi项目里面 一般除了接口, 还有管理端...一些乱七八糟的,你想展示的东西, 一种做法是分开写: 比如管理后台一个项目, 然后接口一个, 然后页面一个, 其实这样做也可以,但是这么做, 无 ...
- AI学习网址记录
https://ai.yanxishe.com/ https://ai.yanxishe.com/page/blogDetail/14365 GAN网络 对抗式生成网络-图像超分辨及图像修复 完全可见 ...
- shell编程系列20--文本处理三剑客之awk常用选项
shell编程系列20--文本处理三剑客之awk常用选项 awk选项总结 选项 解释 -v 参数传递 -f 指定脚本文件 -F 指定分隔符 -V 查看awk的版本号 [root@localhost s ...
- ISO/IEC 9899:2011 条款6.5.5——乘法操作符
6.5.5 乘法操作符 语法 1.multiplicative-expression: cast-expression multiplicative-expression * cast-e ...
- svn服务端搭建
本文介绍的是SVN的服务器端的搭建. 一.SVN服务器安装 1. 首先来下载和搭建SVN服务器,下载地址如下: http://subversion.apache.org/packages.ht ...
- window TOMCAT 端口被占用了怎么办？
查看80端口被哪些程序占用了 netstat -ano|findstr "80" 根据pid(进程id) 查询对应的应用程序 tasklist|findstr "1828 ...