![cover](https://img-blog.csdnimg.cn/66850915f6a74327a71598e370bb6c96.png)
VUE的引入以及基本使用
VUE的简单概述和基本使用方法
Vue的基本介绍
简单来说,Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写html代码。例如下面就是DOM的部分操作:
document.getElementById(idName) );
学习了 VUE 后,这部分代码我们就不需要再写了。那么 VUE 是如何简化 DOM 书写呢?
基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。之前我们是将关注点放在了 DOM 操作上;而要了解 MVVM 思想,必须先聊聊 MVC 思想,如下图就是 MVC 思想图解
MVC:只能实现模型到视图的单向展示
简单来说就是将模型中的数据通过html的方式,展示在前端页面中,当模型中的数据改变时,前端页面跟着改变。
MVVM:可以实现模型到视图的双向展示
模型和视图可以通过VUE模型进行双向绑定。当模型数据变化时前端页面会随之变化,而在前端网页中,例如:表单数据变化时,模型数据也会随之改变。
IDEA中引入VUE的两种方式
方法1.下载插件
1.1 下载完后根据提示重启IDEA
1.2 在setting中找到Editor>File Types>Vue.js Template,然后点击加号,添加*.html,即.html认为vue可识别
1.3 创建***.html文件发现,vue代码块成功提示并高亮。但是凡是html文件的图标都变成的vue的文件的显示图标,但这个没有什么影响。此时编写VUE和插值表达式代码时都会系统提示。
方法2.更改File type
1.此方法不需要下载插件Vue.js,仅作VUE语法上的提示,编写插值表达式的时候系统不会提示,HTML图标不会受影响。和方法1 一样也是修改file types,不过是修改HTML,添加上*.vue,即HTML认为.vue可识别。
2.然后找到Editor>Inspections>HTML>Unknown HTML tag attribute,将原来内容删去,复制如下内容,添加新的标签库内容
@tap,@tap.stop,@tap.prevent,@tap.once,@click,@click.stop,@click.prevent,@click.once,@change,@change.lazy,@change.number,@change.trim,v-model,v-for,v-text,v-html,v-if,v-else-if,v-else,v-pre,v-once,v-bind,scoped,@keyup.enter,:class,:style,v-show,:key,@keyup,@submit,@submit.prevent,@mouseenter,@mouseleave,@mouseout,@mouseover
*注意如果你尝试过第一种方式,那么这里你HTML应该会缺少.html,重新补上(这种情况下需要添加 .html 和 .vue)
VUE指令
指令:HTML 标签上带有 v- 前缀的特殊属性,不同指令具有不同含义。例如:v-if,v-for…
指令 | 作用 |
---|---|
v-bind | 为HTML标签绑定属性值,如设置 href , css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为HTML标签绑定事件 |
v-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-else | |
v-else-if | |
v-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
代码演示v-bind v-model的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">点击一下</a>
<a :href="url">点击一下</a>
<input v-model="url">
</div>
<script src="js/vue.js"></script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
username:"",
url:"https://www.baidu.com"
}
}
});
</script>
</body>
</html>
通过浏览器打开上面页面,该路径会根据输入框输入的路径变化而变化,这是因为超链接和输入框绑定的是同一个模型数据
运行:
关于vue的其他用法可上网搜索
引入vue.js文件和使用流程
-
新建 HTML 页面,引入 Vue.js文件
<script src="js/vue.js"></script>
-
在JS代码区域,创建Vue核心对象,进行数据绑定
new Vue({ el: "#app", data() { return { username: "" } } });
创建 Vue 对象时,需要传递一个 js 对象,而该对象中需要如下属性:
el
: 用来指定哪儿些标签受 Vue 管理。 该属性取值#app
中的app
需要是受管理的标签的id属性值data
:用来定义数据模型methods
:用来定义函数。这个我们在后面就会用到
-
编写视图
<div id="app"> <input name="username" v-model="username" > {{username}} </div>
{{}}
是 Vue 中定义的插值表达式
,在里面写数据模型,到时候会将该模型的数据值展示在这个位置。
VUE的声明周期
- 开始创建
- 初始化数据
- 编译模板
- 挂载Dom
- 渲染→更新→渲
- 卸载
我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。其中最重要的是mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。我们会在该方法中发送异步请求,加载数据。
更多推荐
所有评论(0)