此篇文章是本人在学习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>
<my-component></my-component>
</div> </div>
Vue.component('my-component',{
template:'<div>Hello</div>'
})

结果


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




Vue学习笔记-Vue基础入门的更多相关文章

  1. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  2. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  3. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  4. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  5. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  6. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  7. Vue 学习笔记之快速入门篇

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

  8. Vue学习笔记:基础

    Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的 插值 数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值 指令 指令的定义:Direct ...

  9. Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)

    脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...

随机推荐

  1. Jquery地图热点效果-鼠标经过弹出提示信息

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. hiveQL去重

    去重: 以id进行分组,然后取出每组的第一个 ; 以id进行分组,按照create_time降序排序后,然后取出每组的第一个 ; 将去重后的数据重新存储 ; 去重之后与其他表join算匹配数 sele ...

  3. django集成celery之callback方式link_error和on_failure

    在使用django集成celery进行了异步调度任务之后,如果想对失败的任务进行跟踪或者告警,怎么做? 这里提供一个亲测的方法. 1.任务callback 假如你想在任务执行失败的时候,打印错误信息并 ...

  4. jquery事件使用方法总结

    jquery提供了许多的事件处理函数,学习前端一段时间了,下面对其总结一下,梳理一下知识点. 一.鼠标事件 1. click():鼠标单击事件 $div = $("div") $d ...

  5. 【特效】hover图片立体翻转

    hover图片翻转效果二::绕Y轴旋转90度,注意父层要加透视属性perspective,这样才能看出立体效果 html: <ul class="list-img"> ...

  6. WPF DataGridHyperlinkColumn

    为了点击链接,我们使用 <DataGrid x:Name="data" LoadingRow="load" ItemsSource="{Bind ...

  7. Android基础知识06—活动的四大启动模式

    ------ 活动的启动模式 ------ 在实际项目中应该根据特定的需求为每个活动指定恰当的启动模式. 四种启动模式: standard . singleTop . singleTask . sin ...

  8. Centos7安装后出现please make your choice from '1' to e 解决方式

    [输入"1",按Enter键   输入"2",按Enter键    输入"q",按Enter键    输入"yes",按 ...

  9. Linux系列教程(四)——Linux文件和目录处理命令

    这个系列教程的前面我们讲解了如何安装Linux系统,以及学习Linux系统的一些方法.那么从这篇博客开始,我们就正式进入Linux命令的学习.学习命令,首先要跟大家纠正的一点就是,我们不需要记住每一条 ...

  10. JPA之helloWorld

    在 Eclipse 下创建 JPA 工程 1.在eclipse上安装JPA插件(网上自行百度) 2.new 一个Jpa工程 3:点击下一步,下一步,第一次运行jpa插件会让我们装相关类库如下图,等到再 ...