"谈谈我对 Vue 的理解# vue 就是前端上的 Java，前端上的 C#。有个前端的虚拟 DOM 引擎，设计理念和 Java，C# 类似。我们只需要告诉 DOM 应该显示什么，而不用去操作 DOM 元素。如何引用？# 下面是一个 helloWord, 大家运行感受一下。 {{msg}} 运行 ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 25 浏览 • 4 个月前

Vue新手入门教程

谈谈我对 Vue 的理解#

vue 就是前端上的 Java，前端上的 C#。有个前端的虚拟 DOM 引擎，设计理念和 Java，C# 类似。我们只需要告诉 DOM 应该显示什么，而不用去操作 DOM 元素。

如何引用？#

下面是一个 helloWord, 大家运行感受一下。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <meta charset="utf-8">
</head>
<body>
<div id="app">
    <!--使用 v-cloak 能够解决插值闪烁问题-->
    <p>{{msg}}</p>
</div>
<script type="text/javascript">
//VM 层
var vm = new Vue({
el:'#app',//表示，当前我们 new 这个 vue 的实例，要控制页面上的哪个区域
//M 层
        data:{//data 属性中存放的是 el 中要用的数据
            msg:'HelloWorld'//通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操作 dom 元素了。
        }
})
</script>
</body>
</html>

运行效果如下：

这里当导入了 vue.js 库后，里面会有个 Vue 的构造器，对应着 div。vue 构造器中里面的 el 绑定 div，data 绑定数据。

解决闪烁问题：#

相信新手都遇到过这个问题：

能看到 {{msg}} 是不是很没有 B 格？

这时候加个 v-cloak 属性即可解决

代码如下：有注释肯定能看懂。

<!DOCTYPE html>
<html>
<head>
    <title></title>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">charset</span><span style="color: rgba(0, 0, 255, 1)">="utf-8"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">style </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="text/css"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">
    [v-cloak]</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        display</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">none</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</head>
<body>
<div id="app">
<!--使用 v-cloak 能够解决插值闪烁问题-->
<p v-cloak>{{msg}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
//VM 层
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> vm </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">new</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> Vue({
    el:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">#app</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">表示，当前我们new这个vue的实例，要控制页面上的哪个区域</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">M层</span>

        data:{//data 属性中存放的是 el 中要用的数据
            msg:'欢迎学习 Vue'//通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操作 dom 元素了。
        }
})
</script>
</body>
</html>

这时候就看不见 {{msg}} 了

v-bind 指令:#

v-bind 是 vue 中提供的用于绑定属性的指令实例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <meta charset="utf-8">
    <style type="text/css">
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--使用 v-cloak 能够解决插值闪烁问题-->
    <p v-cloak>{{msg}}</p>
    <input type="button" v-bind:value="value">
</div>
<script type="text/javascript">
    //VM 层
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> vm </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">new</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> Vue({
    el:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">#app</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">表示，当前我们new这个vue的实例，要控制页面上的哪个区域</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">M层</span>

        data:{//data 属性中存放的是 el 中要用的数据
            msg:'欢迎学习 Vue'//通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操作 dom 元素了。
            ,value:'按钮'
}
})
</script>
</body>
</html>

运行结果：

可以看到 bind 能够绑定属性值。

原理：v-bind 会把原属性值变成 js 变量解析。

注意：v-bind 指令可以被简写位：要绑定的属性

v-bind 中可以写合法的 js 表达式。

v-on 指令：#

Vue 中提供了 v-on 事件绑定机制。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <meta charset="utf-8">
    <style type="text/css">
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--使用 v-cloak 能够解决插值闪烁问题-->
    <p v-cloak>{{msg}}</p>
    <input type="button" v-bind:value="value" v-on:click="show">
</div>
<script type="text/javascript">
    //VM 层
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> vm </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">new</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> Vue({
    el:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">#app</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">表示，当前我们new这个vue的实例，要控制页面上的哪个区域</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">M层</span>

        data:{//data 属性中存放的是 el 中要用的数据
            msg:'欢迎学习 Vue'//通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操作 dom 元素了。
            ,value:'按钮'
},
methods:{//这个 methods 属性中定义了当前 Vue 实例所有可用的方法
            show: function(){
alert("Hello");
}
}
})
</script>
</body>
</html>

截止如下：我们掌握了如何定义一个基本的 Vue 代码结构，插值表达式，v-cloak，v-html，v-bind v-on 。

Vue新手入门教程

谈谈我对 Vue 的理解#

如何引用？#

解决闪烁问题：#

v-bind 指令:#

v-on 指令：#

相关帖子

随便看看

Vue新手入门教程