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
