vue学习第一天-----（基本结构、v-cloak、v-text、v-html、v-bind、v-on）

b704465039

于 2019-07-21 11:29:32 发布

阅读量127

点赞数

分类专栏：学习类文章标签： vue 学习日记

学习类专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是vue.js

vue.js是前端主流框架之一和angular.js、React.js
可以用于手机App的开发
是一套构建用户界面的框架之关注视图层MVC模式中的V

框架与库的区别

框架是完整的解决办法，更换框架需要重新架构整个项目
库提供小的功能，对项目的入侵小，容易更换

MVC与前端MVVM
图片说明在这里插入图片描述
基本结构

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- -->
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- mvvm 中的V-->
<div id="app">
    <p>{{msg}}</p>
</div>
<script>
    //创建实例
    //整个实例就是VM
 var vm = new Vue({
     el:'#app',//指定控制的元素 与ID对应
     //date就是 mvvm里的M
     data:{//数据属性
         msg:'hello vue'
     }
 })
</script>
</body>
</html>

v-cloak、v-text、v-html、v-bind、v-on

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <!--v-cloak解决插值表达式闪烁问题 -->
    <p v-cloak>100+23={{msg}}</p>
    <!--v-text没有闪烁问题  会直接文本替换为v-text-->
    <h4 v-text="msg"></h4>

    <div>{{msg2}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg2"></div>
    <!--v-bind 绑定元素属性    可以直接使用英文：替代v-bind -->
    <!--v-on 事件绑定机制-->
    <input type="button" value="按钮" v-bind:title="mytitle+'呵呵'" v-on:click="alert('hello')">
    <input type="button" value="按钮" :title="mytitle+'冒号代替'" v-on:click="show">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'123',
            msg2:'<h1>11111111</h1>',
            mytitle:'我的title'
        },
        methods:{
            show:function () {
                alert('hello')
            }
        }
    })
</script>
</body>
</html>