Vue.js 是什么?
很多学习Vue的小伙伴都活有这样的疑惑,通常我认为Vue是了不起的,为什么了不起?因为它能干你的事情实在是太多了。
一、了不起的Vue
1.简单介绍
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型 框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图 层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的 工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2.Vue的渐进式
框架做分层设计,每层都可选,不同层可以灵活接入其他方案。而当你都想 用官方的实现时,会发现也早已准备好,各层之间包括配套工具都能比接入 其他方案更便捷地协同工作。
一个个放入了多少,你的项目就做多少。
二、Vue的安装
尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 Vue:
- 直接下载并用
* `<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>`
- 命令行工具vue cli Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。
* npm install ‐g @vue/cli
三、Vue的数据绑定原理
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍 历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转 为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性, 这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。 每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接 触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。
注意:vue3 的 变化
Object.defineProperty有以下缺点。
1、无法监听es6的Set、Map 变化;
2、无法监听Class类型的数据;
3、属性的新加或者删除也无法监听;
4、数组元素的增加和删除也无法监听。
Vue—常用的指令
这里简单的和大家介绍下Vue项目中常用的指令:
1、v-html
v-html指令主要是用于更新元素的innerHTML。例如下面的写法,myname里面的的标签<p>
在有指令v-html之后,<b>
标签会被页面渲染出来,属性的内容也会被渲染到页面上。
<body>
<div id="box">
<p v-html='myname'></p>
</div>
</body>
<script>
new Vue({
el: '#box',
data: {
myname:'<b>我的名字</b>'
}
})
</script>
2、v-if
v-if指令 动态创建/删除元素模块,根据属性值true/false
控制元素是否被渲染在页面上。例如myif
属性值为true
,<p>
标签显示在页面上,myif
属性值为false
,<p>
标签不会被渲染出来。
<body>
<div id="box">
<p v-if='myif'>我是v-if</p>
</div>
</body>
<script>
new Vue({
el: '#box',
data: {
myif:true
}
})
</script>
3、v-show
v-show指令 动态显示/隐藏,根据属性值true/false
控制元素是否被渲染在页面上。例如myshow
属性值为true
,<p>
标签显示在页面上,myshow
属性值为false
,<p>
标签不会被渲染出来。
<body>
<div id="box">
<p v-show='myshow'>我是v-show</p>
</div>
</body>
<script>
new Vue({
el: '#box',
data: {
myshow:true
}
})
</script>
4、v-bind
v-bind指令 用于动态绑定DOM元素的属性,可以缩写成" : "
。任何属性方法需要动态获取都可以使用" : "
,例如<img>
标签的src
属性,<a>
标签的href
属性。
<!-- v-bind动态绑定属性 -->
<div v-bind:class="isRed?'myyellow':'myred'">11111111</div>
<a :class="isRed?'myyellow':'myred'">11111111</a>
<img v-bind:src="myimg1">
var vm =new Vue({
el:'#box',
data:{
mycolor:'myyellow',
isRed:true,
},
})
</script>
5、v-on
v-on指令 用于绑定监听事件,可以简写@。下面用click
事件进行举例,点击1/点击2都可以再控制台打印'666'
。
<!-- v-on绑定事件 -->
<button v-on:click='handClick()'>点击1</button>
<button @click='handClick()'>点击2</button>
var vm =new Vue({
el:'#box',
data:{
myname:'张三',
mycolor:'myyellow',
isRed:true,
},
methods:{
handClick(){
console.log(6666)
}
}
})
6、v-for
v-for指令 用于遍历循环数组数据,实现列表类的渲染,一般情况下遍历列表后需要加:key
值,代表唯一的id,类适于身份证。
<body>
<div id="box">
<!-- v-for循环 -->
<ul>
<li v-for='(item,index) in mylist' :key="index">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm =new Vue({
el:'#box',
data:{
mylist:['111','2222','333'],
}
})
</script>
7、v-model
v-model 指令 用于表单的双向绑定。
在input
中绑定v-model
可以很轻松的获取到input
中的val值。
<body>
<div id="box">
<input type="text" v-model='mymodel' @input="app()">
</div>
</body>
<script>
var vm =new Vue({
el:'#box',
data:{
mymodel:''
},
methods:{
app(){
console.log(this.mymodel)
// 可以直接获取到input中的val值
}
}
})
</script>
8、v-else
v-else 指令 一般和v-if配合使用,用于购物车页面作为常见,这里给大家简单说明下,v-else
和v-if
表示如果mylist.length
为真显示购物车列表,如果mylist.length
值为假页面渲染 “空空如也···”。
<body>
<div id="box">
<div v-if='mylist.length'>
<ul>
<li v-for='item in mylist'>{{item}}</li>
</ul>
</div>
<div v-else>空开如也···</div>
<div v-if='type===1'>卖家付款</div>
<div v-if='type===2'>卖家发货</div>
<div v-if='type===3'>卖家收货</div>
<div v-else>未下单</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
myif: true,
mylist: ['111', '2222', '33333'],
type: 0,
}
})
</script>
这里简单和大家介绍到这里,常用的基本上都在,我也是刚学习Vue知识,不定期会进行更新把自己学习的知识点进行总结和大家分享。