写点什么

全网最热 Vue 入门教程你不看就吃亏了哦

  • 2021 年 11 月 11 日
  • 本文字数:2197 字

    阅读完需:约 7 分钟

  • 企业中,使用框架,能够提高开发的效率;

  • 提高开发效率的发展历程:原生 JS -> Jquery 之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js(能够帮助我们减少不必要的 DOM 操作;提高渲染效率;双向数据绑定的概念【通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑,不再关心 DOM 是如何渲染的了】)

  • 在 Vue 中,一个核心的概念,就是让用户不再操作 DOM 元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑;


3.Node(后端)中的 MVC 与 前端中的 MVVM 之间的区别




  • MVC 是后端的分层开发概念;

  • MVVM 是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM 把前端的视图层,分为了 三部分 Model, View , VM ViewModel

  • 为什么有了 MVC 还要有 MVVM



MVVM 是前端视图层的分层开发思想,主要把每个页面,分成了 M,V 和 VM,其中 VM 是 MVVM 的思想核心:因为 VM 连接着 M 和 V。


前端页面中使用 MVVM 的思想,主要是为了让我们开发 MVVM 提供了数据的双向绑定,双向绑定是由 VM 提供的


二、Vue 基本使用


=======================================================================


此次代码工具是 Visual Studio Code,小伙伴可自行下载安装。


1.第一个案例




代码如下:


<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<meta http-equiv="X-UA-Compatible" content="ie=edge">


<title>Document</title>


<script src="./lib/vue-2.4.0.js"></script>


</head>


<body>


<div id="app">


<p>{{ msg }}</p>


</div>


<script>


// 2. 创建一个 Vue 的实例


// 当我们导入包之后,在浏览器的内存中,就多了一个 Vue 构造函数


// 注意:我们 new 出来的这个 vm 对象,就是我们 MVVM 中的 VM 调度者


var vm = new Vue({


el: '#app', // 表示,当前我们 new 的这个 Vue 实例,要控制页面上的哪个区域


// 这里的 data 就是 MVVM 中的 M,专门用来保存 每个页面的数据的


data: { // data 属性中,存放的是 el 中要用到的数据


msg: '欢迎学习 Vue' // 通过 Vue 提供的指令,很方便的就能把数据渲染到页面上,程序员不再手动操作 DOM 元素了【前端的 Vue 之类的框架,不提倡我们去手动操作 DOM 元素了】


}


})


</script>


</body>


</html>


注意代码中的注释!


访问页面




2.常用指令




| 指令 | 描述 |


| --- | :-- |


| {{}} | 插值表达式 |


| v-cloak | 解决 插值表达式闪烁的问题 |


| v-text | 和插值一样也是使用 vue 中的变量,但是默认没有闪缩问题,但是会覆盖原本的内容,插值不会 |


| v-html | 显示 HTML 的内容 |


| v-bind | Vue 提供的属性绑定机制,缩写是 ‘:’ |


| v-on | Vue 提供的事件绑定机制,缩写是:’@’ |

2.1 插值表达式

在 HTML 页面中我们需要获取 Vue 中的数据,这时我们可以通过插值表达式来获取,如下


<div id="app">


<p>{{ msg }}</p>


</div>


<script>


var vm = new Vue({


el: '#app',


data: {


msg: '欢迎学习 Vue'


}


})


</script>


注意:插值表达式有闪缩的问题


我们以站点的方式启动,Ctrl+shift+p :在输入中搜索 如下




访问地址:http://localhost/xxx.html




加载完成就会变好!这就是插值闪烁的问题

2.2 v-cloak

v-cloak 指令可以解决上面插值闪烁的问题,如下:其实利用的就是当插值没有被加载出来的是通过 style 属性将内容给隐藏了。


<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<meta http-equiv="X-UA-Compatible" content="ie=edge">


<title>Document</title>


<style>


[v-cloak] {


display: none;


}


</style>


</head>


<body>


<div id="app">


<p v-cloak>++++++++ {{ msg }} ----------</p>


</div>


<script src="./lib/vue-2.4.0.js"></script>


<script>


var vm = new Vue({


el: '#app',


data: {


msg: 'hello',


}


})


</script>


</body>


</html>

2.3 v-text

和插值差不多,也可以从 vue 对象中获取信息,v-text 默认是没有闪烁问题的,但是会覆盖掉原有的内容,但是 插值表达式 只会替换自己的这个占位符,不会把 整个元素的内容清空,如下


<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<meta http-equiv="X-UA-Compatible" content="ie=edge">


<title>Document</title>


<script src="./lib/vue-2.4.0.js"></script>


</head>


<body>


<div id="app">


<p>


【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】
浏览器打开:qq.cn.hn/FTf 免费领取
复制代码


----{{msg}}=====</p>


<p v-text="msg"></p>


<p v-text="msg">*******</p>


</div>


<script>


var vm = new Vue({


el:"#app",


data:{


msg:"hello vue"


}


})


</script>


</body>


</html>


2.4 v-html

默认我们从 Vue 对象中获取的信息如果含有 HTML 标签的话只会当做普通字符串显示,如果我们要显示标签的语义,那么需要使用 v-html 指令如下


<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<meta http-equiv="X-UA-Compatible" content="ie=edge">


<title>Document</title>


<script src="./lib/vue-2.4.0.js"></script>


</head>


<body>


<div id="app">


<p>----{{msg}}=====</p>


<p v-text="msg"></p>


<p v-text="msg">*******</p>


<p v-html="msg"></p>


</div>


<script>


var vm = new Vue({


el:"#app",


data:{


msg:"<h3>hello vue</h3>"


}


})


</script>


</body>


</html>

评论

发布
暂无评论
全网最热Vue入门教程你不看就吃亏了哦