美文网首页
Vue-2.0基础教程:Vue的基本代码

Vue-2.0基础教程:Vue的基本代码

作者: _灵风y | 来源:发表于2019-10-28 17:32 被阅读0次

    Vue.js是什么?

    • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

    Vue的基本代码

    • 首先在我们创建的HTML文件中导入vue的包
    <!-- 导入vue的包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    • 在页面中创建vue的实例
    var vm = new Vue({ //在mvvm架构思想中 new的 vue 相当于 vm
      //当我们导入vue的包之后浏览器的内存中就多了一个vue的构造函数 
    })
    
    • 基本代码解析
      el:'#app', //Element的缩写表示当前我们new的实例要控制页面的哪个元素,在这里这个Vue组件控制的是id为app的这个div
    var vm = new Vue({ //在mvvm架构思想中 new的 vue 相当于 vm
        el:'#app' 
    })
    

    data:{ //data属性中存放的是el中要用到的数据,这里的data就相当于MVVM中的M
    }

    var vm = new Vue({ //在mvvm架构思想中 new的 vue 相当于 vm
        el:'#app',
        data:{  
            message:'欢迎学习VUE', //通过vue提供的指令可以很方便的把数据渲染到页面上,vue不提倡操作dom元素
        }
    })
    
    • 把data渲染到页面上格式是:{{ message }}
    <!-- new的vue的实例将会控制这个元素中的所有内容 -->
        <div id="app">
            <P id="content">{{message}}</P>
        </div>
    

    这样就能在页面上显示内容了


    image.png

    Vue基本指令

    • v-cloak:可以解决插值表达式闪烁的问题 表达式前后加内容不会被覆盖
    <p v-cloak>{{msg}}</p>
    
    • v-text:不会出现闪烁问题 元素里面添加内容会被覆盖
    <h4 v-text='msg'></h4>
    
    • v-html: 则会解析html语句
    <div v-html='msg3'></div>
    
    • v-bind:是vue中提供的用于绑定属性的指令,可以写合法的js表达式 可以简写为:
      此段代码中的v-bind绑定的值来自于Vue中的mittle
     <input type="button" value="这是一个按钮" v-bind:title="mytitle"/>
    
    • v-on:事件绑定机制,缩写是@
      例如绑定点击时间:v-on:click='show'
    var vm = new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h2>哈哈 我是一个 大大 的H2 </h2>',
                msg3:'<h1>克里斯保罗去雷霆了,回到了梦开始的地方</h1>',
                mytitle:'这是一个自己定义的Title'
            },
            methods:{ //这个methods 属性中定义了当前vue实例的可用方法
                show:function(){
                    alert("hello VUE")
                }
            }
        })
        //只要触发点击事件就会调用Vue的show方法
    
    • v-model 和双向数据绑定
      之前介绍的 v-bind:只能实现数据的单向绑定,也就是说只能从M --- V
      v-model则可以实现数据的双向绑定即 M--V V--M
      v-model 只能用在表单元素中
    <input type="text" v-model:value="msg"/>
    
    image.png

    相关文章

      网友评论

          本文标题:Vue-2.0基础教程:Vue的基本代码

          本文链接:https://www.haomeiwen.com/subject/jcgbvctx.html