适合后端程序员的Vue教程_part1_Vue入门

笔者的话

2013年,在google工作的尤雨溪因为对于项目中使用的现有框架不满而开发了Vue。如今,Vue已然成为各大公司的前端首选,作为一名后端工程师,工作中也多多少少会接触到前端开发。本文是笔者在小破站学习Vue的笔记,如果大家感兴趣的话也可以去看看这位宝藏up主(编程不良人)的视频。
https://www.bilibili.com/video/BV1SE411H7CY

Vue引言

渐进式JavaScript框架 –Vue官网

渐进式

  1. 易用 HTML CSS JavaScript
  2. 灵活 开发灵活,多样性
  3. 高效 开发前端页面,非常高效

后端服务端开发人员

  • Vue渐进式JavaScript框架:让我们通过操作很少的DOM,甚至不需要操作页面中的任何DOM元素,就很容易地完成数据和视图的绑定。 双向绑定 MVVM
  • 注意:在使用Vue的过程中页面中不要再引入Jquery
  • htmlcss—>javascript—>jquery—>angularjs—>Vue

Vue作者

  • 尤雨溪

Vue快速入门

下载vue.js

1
2
3
4
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue第一个入门应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
{{msg}} {{username}} {{pwd}}
<br>
<span>
{{username}}
<h1>{{msg}}</h1>
</span>
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app", //用来给Vue实例定义一个作用范围 element,比如id选择器,作用于id为app的dom元素
data:{ //用来给Vue实例定义一些相关的数据
msg:"这是我的第一个Vue实例!!!",
username:"hello Vue!",
pwd:"12345"
},
});
</script>
1
2
3
4
5
6
7
总结:
- vue实例中el属性:代表Vue的作用范围,日后在Vue的作用范围内都可以使用Vue的语法
- vue实例中data属性:用来给Vue实例绑定一些相关数据,绑定的数据可以通过{{变量名}}在Vue作用范围内取出
- 在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
- el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue时推荐使用**id选择器**

- 注意:在vue代码中,script标签一定要写在页面**dom树后面**,否则无法渲染成功

v-text和v-html

v-text

v-text: 用来获取data中的数据将数据以文本的形式渲染到指定标签内部,类似JavaScript中的innerText

1
2
3
4
总结:
- {{}}(插值表达式)和v-text获取数据的区别在于:
a. 使用v-text取值会将标签中原有的数据覆盖
b. 使用v-text可以避免在网络比较差的情况下出现插值闪烁

v-html

v-html: 用来获取data中数据将数据中含有的html标签先解析再渲染到指定标签内部,类似JavaScript中的innerHtml

0%