知名大厂前端大师教你Vue从入门到精通

优质资源分享

已于 2022-03-25 17:39:40 修改

阅读量1.5k

点赞数

分类专栏：前端文章标签： vue.js

于 2022-03-25 16:49:46 首次发布

本文链接：https://blog.csdn.net/yunyingshop/article/details/123739913

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

具体教程：

知名大厂前端大师教你Vue从入门到精通-Node.js文档类资源-CSDN下载Vue教程知名大厂前端大师教你Vue从入门到精通更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/TiaoZhanJi_Xian/85034998?spm=1001.2014.3001.5503vue就是前端上的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>

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层
    
    var vm = new Vue({
        el:'#app',//表示，当前我们new这个vue的实例，要控制页面上的哪个区域
        //M层
        data:{//data属性中存放的是el中要用的数据
            msg:'欢迎学习Vue'//通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不用再操作dom元素了。
            ,value:'按钮'
        }
    })
</script>
</body>
</html>