Vue框架的认识和简单使用

什么是Vue.js

vue.js就是一个前端的渐进式JavaScript框架,与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
易用: 学习曲线相对较低且平滑
灵活: 可以在一个库到一套生态中伸缩
高效: 运行快,体积小

 

Vue.js的简单使用

首先引入我们的vue.js,有两种引入方式,一种是使用标签来使用,第二种就是以模块引入的方法,第二种模块引入的方式我们以后在说,现在就说正常的使用标签来引入,如下

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

{{ }} 获取Vue属性  在HTML标签中获取Vue的属性, 首先是new Vue, 然后在Vue里面写你的代码了,在Vue里面使用 el 选择器来选择你的HTML代码是哪一块,然后在里面申请一个 data 的参数,这个data你可以理解为变量,这样的话就HTML中你是用 {{变量名字}} 就能拿到值了,只能在el选择器选中的HTML才能拿到值

<div id="app">{{name}},{{age}},{{sex}}</div>

{{name}},{{age}},{{sex}} <!--这一块拿不到值,因为不在 el 选择器的范围之内 -->

<script>
    new Vue({
        // el 就是一个选择器,可以用其他的选择器,比如class选择器 id选择器等等
        el: "#app",

        // data 你可以理解成一个变量,在html中可以用 {{名字}} 来拿值
        data: {
            name: "旺财",
            age: 12,
            sex: "男"
        }
    })
</script>

 

v-text 获取Vue属性 这种使用方式和{{ }}是一样的使用,如下

<div id="app">
    <!--使用 v-text 来获取Vue里面的属性 -->
    <p v-text="name"></p>
    <a v-text="age"></a>
    <h1 v-text="sex"></h1>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "旺财",
            age: 12,
            sex: "男"
        }
    })
</script>

 

 

{{}} 和 v-text  拿值的区别  他们的区别就是在于出现网络延迟的情况下, {{}} 最开始会解析成文本,等js加载完在解析成属性值, 但是v-text会等待js加载完在解析,测试如下

两秒之后如下

 

 

v-html 获取Vue的属性  使用v-html获取Vue属性的时候,会以Html来解析的,但是使用v-html会很容受到攻击

<div id="app">
    <div v-html="name"></div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "<a href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'>Vue.js</a>",
        }
    })
</script>