vue快速入门-1

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