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

发表于 | 分类于 | 评论数： | 阅读次数：
本文字数： 2k | 阅读时长 ≈ 3 分钟

笔者的话

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%