什么是Vue

超、凢脫俗 2022-09-04 13:47 148阅读 0赞

## **Vue.js 是什么？** ##

Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链][Link 1]以及各种[支持类库][Link 2]结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

**Vue的视频讲解**

**让我们通过实例来看下 Vue 构造器中需要哪些内容:**

<div id="app">
            <h1>site : {
       {name}}</h1>
            <h1>url : {
       {url}}</h1>
            <h1>{
       {details()}}</h1>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    name: "星河的完美天空",
                    url: "https://blog.csdn.net/weixin_52555763?spm=1000.2115.3001.5343",
                    alexa: "10000"
                },
                methods:{
                    details(){
                        return  this.name + " --- 灰常 漂亮 ~~~";
                    }
                },
                mounted(){
                    
                }
            })
        </script>

在代码中可以清除的看见 id 在DOM元素中为 id 的 vue\_det 也可以硕为挂载点为div的：

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

接下来我们看看如何定义数据对象。

**data** 用于定义属性，实例中有三个属性分别为：site、url、alexa。

**methods **用于定义的函数，可以通过 return 来返回函数值。

**\{ \{ \}\} **用于输出对象属性和函数返回值。

<div id="app">
            <h1>site : {
       {name}}</h1>
            <h1>url : {
       {url}}</h1>
            <h1>{
       {details()}}</h1>
        </div>

当一个实例被创建时，Vue的响应式系统在他的**data**中找到所有的属性值，当这些属性值发生变化时，HTML视图也会发生变化。

## **Vue.js 的模版语法** ##

数据绑定最常见就是使用 **\{ \{\}\}**文本插值表达式。

**1、v-html解析标签**

<div id="app">
            <div v-html = "name"></div>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    name: "<h1>星河的完美天空</h1>",
                }
            })
        </script>

在使用**v-html**当中，会解析你的**data**数据里面标签。

**2、v-text 返回的效果**

<div id="app">
            <div v-text = "name"></div>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    name: "<h1>星河的完美天空</h1>",
                }
            })
        </script>

**v-text**返回的效果和**\{ \{\}\}**一样只不过把里面的内容返回，并不会解析里面的标签。

**3、v-bind绑定数据**

**\*\*批注\*\* style 标签的位置 是为了更能方便的看见 望大家小朋友更能得遵守代码规范**

**input** 的绑定 **v-bind**绑定数据 为 **true** 的时候就会显示 **p** 的样式  否则就不显示

**4、v-if和v-show的区别**

<div id="app">
            <h1 v-if = "use">现在能看见我啊~~~我是H1</h1>
            <h2 v-show = "users">你也能看见我~~~我是H2</h2>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    use: true,
                    users :true
                }
            })
        </script>

大家来看一下**v-if**和**v-show**的切换

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU1NTc2Mw_size_16_color_FFFFFF_t_70][]

** v-if默认为 true显示 **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU1NTc2Mw_size_16_color_FFFFFF_t_70 1][]

** v-if和v-show的区别？**

1、v-if有更高的切换开销，v-show有更高的初始渲染开销。如果需要频繁的切换，使用v-show比较好，如果运行条件很少改变，使用v-if比较好。

2、v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。所以当程序不是很大时候，v-if和v-show区别都不大，如果项目很大，推荐多用v-show，较少浏览器后期操作的性能。

**5、v-model的数据的双向绑定**

**`v-model`** 指令在表单 **`<input>`、`<textarea>` **及 **`<select>` **元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 `v-model` 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

**6、v-on的事件监听，并对用户的输入做出响应**

<div id="app" style="text-align: center;margin-top: 30px;">
            
            <button v-on:click = "app">点击我会 + 1 -- {
       {msg}}</button>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:1
                },
                methods:{
                    app(){
                        this.msg++
                    }
                }
            })
        </script>

以上就是在使用Vue的模版语法 最常见的几种语法案列 并且 想专心学习就上官方文档查找，关注我，下期更精彩~~~

本章节为原创，哈哈哈，但部分题材转载，感谢您的原谅~

[Link 1]: https://cn.vuejs.org/v2/guide/single-file-components.html
[Link 2]: https://github.com/vuejs/awesome-vue#libraries--plugins
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU1NTc2Mw_size_16_color_FFFFFF_t_70]: /images/20220829/0f539a7debac4bf799fdbe5bdb0528d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU1NTc2Mw_size_16_color_FFFFFF_t_70 1]: /images/20220829/83eeb14b3bea45428f8ad31a1e480cc9.png