vue入门之基础语法(一)——创建实例和简单指令

  • 前言:

本篇文章就是简单的记录一下vue系列的最最最常用的一些知识点,让大家在掌握了CSS、html、js的基础上,能快速的用vue进行一个页面的开发,毕竟,我们不可能一口吃下一个大胖子,那就从最简单,最软的地方来啃吧。

  • 一:vue实例、data函数
    我们要用双向绑定、指令、过滤器这些vue的好东西,就必须先创建一个vue实例,相当于你必须要有一个空间来施展这些 “秘籍” ,否则就算你掌握十八般武艺,也是无从下手,创建vue实例很简单
  1. 一个id或者class
  2. 引入vue文件,例子中我是通过cdn引入vue.js
  3. new 一个vue实例,把定义好的id【app】添加到vue实例的el属性

那我们如何检查自己的vue实例是创建成功了呢?
很简单!我们继续添加一个data函数,在里面return出我们的变量,然后在html中使用模版语法{{}}来渲染,在浏览器打开,就可以看到成功渲染了,如果控制台报错,那肯定就是哪个环节出问题了,比如:data没有定义成函数

ok,这个时候你就可以用正常的class来控制p标签,然后用各种样式来修饰自己的页面~是不是很简单,当标签和data中的变量多起来的时候,你就可以看到一个很棒的web页面

  • 简单的双向绑定
  • 常用的简单指令
    设想一下我们常规的页面,是不是经常要对一些元素进行显示隐藏?或者说我们要动态的改变img的src属性?再或者我们要把一个数组直接循环渲染,而不是一个一个的写?是不是想想都很激动~注意:我们的指令必须要使用在一个元素上,也就是标签
    指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式;指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
    下面是常用的几个指令,这里我们先讲一下简单的,后续的博客专门针对指令来一篇讲解:

    编号 名称 作用
    1 v-if、v-show 为什么把这两个放一起呢,因为效果差不多,都是对页面元素进行显示、隐藏,但是本质的区别就是:v-show只是切换元素的display属性,v-if则会对元素或者组件根据条件进行销毁和重建简单的使用例子看下面截图,更详细的请期待后续指令篇
    2 v-model 数据绑定,更多的用在负责监听用户的输入事件以更新数据,vue中v-model的值会把表单元素的value等忽略,而是采用data函数中定义的变量作为数据来源
    3 v-bind
    缩写(:)
     属性绑定,顾名思义就是把元素的属性【诸如style、class、src等】,和data中的变量绑定,以便变成动态的可变的属性
    4 v-on
    缩写(@)
    和bind不同的是,bind是对属性的绑定,on则是对方法的绑定,比如click,表单元素的change等,或者后面我们遇到的自定义的一些内容都需要
  • 指令使用的例子:【再次强调,指令必须使用在元素上,或者自定义组件上】
    v-if/v-show: 要特别注意后面两个的条件,是我们根据的data里面的变量来判断
  • v-model使用: 还是要看我的v-model对应的值是什么,然后看页面,当我们的input的值改变的时候,p标签中的内容也会随之改变,可不要小看这个属性,这在一些后台管理平台或者是登陆注册等页面,可以少去很多代码,我想你会觉得它是个很可爱的属性的~

  • v-bind: 【缩写  :】属性绑定,我们以img标签的src属性为例,我们知道通常情况下我们的src都是写死的,可是程序员都是天生的懒汉啊!我们不想获取DOM了,也不想再ajax之后,处理一大堆逻辑之后再获取src再赋值写一大堆代码了,这个时候就很方便咯~
    假设我们的data中又一个固定的图片连接

    在这里你只是看到了定义好的一张默认图片,你可以提前幻想一些场景:
    当我们的图片为空的时候,是不是可以采用v-if来控制img的显示隐藏?
    当我们后面学了生命周期还有方法,这个值是ajax请求回来赋值的情况?
    当我们是一个轮播图的时候,你还在写一串div来回翻动?
    当我们页面有一个点击事件然后点击改变data中的值的时候,你的图片会发生什么神奇的事情呢?
  • v-on:【缩写: @】之前的一个问题,当我们有一个元素是可以点击的,比如我们来控制v-if的dataTest的值,那我们的那个v-if该如何呢?这个例子我想大家可以自己试试,然后留言到评论区,如果出错的话,我和胖C也会第一时间回复的~毕竟,看一千遍也不如敲10行代码来的有效果~~~下一篇预告:基础语法篇【指令,生命周期】

发表评论

电子邮件地址不会被公开。 必填项已用*标注