Vue学习笔记-Vue基础入门

此篇文章是本人在学习Vue是做的部分笔记的一个整理，内容不是很全面，希望能对阅读文章的同学有点帮助。

什么是Vue？

Vue.js (读音 /vjuː/，类似于 view)
是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue
采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue
生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

学习Vue需要掌握HTML、CSS 和 JavaScript 中级前端知识，如果是前端初学者不建议学习Vue。

安装与语法

安装

Vue的安装有多种方法，具体安装参考官方文档Vue安装选项。
本文中的示例采用最简单的的一种安装方式，即在html文件中直接引入。代码如下：

<script src="https://unpkg.com/vue"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统：

<div id = "root">{{message}}</div>

new Vue({
el:'#root',
data:{
message:'Hello World!'
}
})

指令

几个常用的vue指令

v-bind
v-if  v-else-if v-else
v-for
v-on
v-model
v-html

下面通过代码简单了解
html代码：

<div id = "root">

<div v-bind:title="message">{{message}}</div>

<!--v-for遍历数组或对象，value为值，index是下标-->
<ul>
<li v-for="(value,index) in courseList">{{index}}/{{value}}</li>
</ul>

<!--v-if 判断语句，值如果为false，删除dom节点-->
<div v-if="isShow">{{hideInfo}}</div>

<!--v-on 绑定事件-->
<button v-on:click="showFunc">{{btnInfo}}</button>

<!--v-model 实现表单输入和应用状态之间的双向绑定-->
<input type="text" v-model="username"/>{{username}}

<!--为元素设置html-->
<div v-html="username"></div>

</div>

js代码：

new Vue({
el:'#root',
data:{
message:'Hello Vue!',
isShow:true,
hideInfo:"我是一个隐藏的块",
btnInfo:'显示隐藏',
courseList:[
'yiyiyi',
'ererer',
'sansansan'
],
username:'cheng'
},
methods:{
showFunc:function(){
this.isShow = !this.isShow;
}
}
})

网页显示结果



此时通过点击按钮是可以控制按钮上方块的显示隐藏的。
v-model实现实现表单输入和应用状态之间的双向绑定。
在input中输入值，所有应用了username的元素，都会发生变化。如下图：

v-if vs v-show

与元素的显示隐藏相关的指令还有v-show。v-show和v-if的显示隐藏是不同的。

v-show是隐藏元素 为元素添加display:none，保留dom节点；而v-if的通过false隐藏是删除dom节点。

那什么时候用v-if，什么时候用v-show呢？
官方给了建议
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

component模板

这个功能很强大，可以自定义html模板。
直接看代码：

<div id = "root">

<div>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
&l
4000
t;my-component></my-component>
</div>

</div>

Vue.component('my-component',{
template:'<div>Hello</div>'
})

结果



这篇文章就先整理到这里，后续还会发布我的Vue的笔记。