Vue.js笔记1
浏览 282 | 评论 0
黄文勇
2018年12月21日

作为想成为前端开发工程师的男人,学校没教框架,自己怎么不能不学呢,所以自己开始自学3大流行框架之一的Vue.js框架。

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

MVC 与 MVVM 开发模式的区别图解

MVC开发模式

MVC开发模式

MVVM 开发模式

MVVM 开发模式

开始第一个vue实例的创建

1.下载vue.js
2.使用<script> 标签引入,Vue 会被注册为一个全局变量。
3.在<script> 中实例化vue()方法。
4.在v视图使用相关代码进行引用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DOM</title>
    <script src="js/vue.js"></script>
    <style>
        [v-cloak]{
           display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--v-cloak去除未加载成功时的闪烁问题-->
        <!-- msg }}占位符,加载实例的数据,只覆盖占位符内容-->
        <p v-cloak>  msg }}</p>

        <!--v-text覆盖加载实例数据-->
        <p v-text="msg"></p>

        <!--v-html覆盖加载HTML内容-->
        <p v-html="msg1"></p>

        <!-- @click相当于 v-on( 是 vue 提供的事件绑定机制 其中 @ 是 v-on: 的缩写 -->
        <!-- :title相当于 v-bind: 是 vue 提供的属性绑定机制  其中 : 是 v-bind: 的缩写-->
        <input type="button" @click="show" value="按钮"  :title="mytitle">
    </div>
    <script type="text/javascript">
        var vm=new Vue({
            el:'#app',
            data: {
            msg:'sjbgasfg',
            msg1:'&lt;h1&gt;我是h1&lt;/h1&gt;',
            mytitle:'我是一个冷漠的按钮,没得感情'
            },
            methods:{
            show:function(){
            alert("但是VS发");
                }
            }
        });
     </script>
</body>
</html>

1.其中vue ({
 el:''//表示绑定指定的区域
 data:{}//表示相关的参数数据
 methods:{}//自定义相关的方法
})
2.{{ msg 占位符,加载实例的数据,只覆盖占位符内容
3.指令 v-cloak 去除 {{ msg ) 占位符未加载成功时的闪烁问题
4.指令 v-text 覆盖加载实例数据,会覆盖标签内的所有内容
5.指令 v-html 覆盖加载HTML内容,会覆盖标签内的所有内容
6.指令 @click 相当于 v-on: 是 vue 提供的事件绑定机制,其中 @ 是 v-on: 的缩写
7.指令 :title 相当于 v-bind:title 是 vue 提供的属性绑定机制 其中 : 是v-bind: 的缩写

本文作者:黄文勇
本文链接:https://www.3dcw.cn/index.php/archives/289/
最后修改时间:2020-05-29 17:46:39
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!
评论
与本文无关评论请发留言板。请不要水评论,谢谢。
textsms
支持 Markdown 语法
email
link
评论列表
暂无评论