Vue入门指南

Vue基础

1-Vue介绍

Vue介绍描述
1.Vue是一个JavaScript框架所谓框架就是别人写好的js文件
2.作用 :构建用户页面将数据渲染到页面
3. 渐进式的特点组件式开发
1-2 Vue基本使用
  • 三个步骤

    1.导包

    2.写HTML结构

    3.js中初始化配置

在这里插入图片描述

1-3 Vue的插值表达式
  • Vue会自动将data对象中的数据渲染到视图
  • 插值表达式会告诉vue,数据渲染在哪个地方
  • 差值表达式注意点
    • (1) {{ }} : 插值表达式,也叫胡子语法
    • (2) 插值表达式作用:将数据渲染到页面
    • (3) 支持二元运算 {{ age + 1 }}
    • (4) 支持三元运算 {{ age>30?‘老男人’:‘小鲜肉’ }}
    • (5) 支持数组与对象的取值语法
    • (6) 不支持分支语法与循环语法

2-Vue指令

指令名称指令作用示例简写方式
v-text设置元素的innerTextv-text="111"
v-html设置元素的innerHTMLv-html='<p>111</p>'
v-on给元素绑定事件v-on:click="doClick"@click='doClick'
v-bind设置元素的原生属性v-bind:src="./logo.png":src="./logo.png"
v-for列表渲染<li v-for=(item,index) in list></li>
2-1 v-text指令
  • v-text指令官方文档地址:https://cn.vuejs.org/v2/api/#v-text
  • v-text指令的作用:设置标签的内容
  • 默认写法会替换全部内容,使用**差值表达式{{}}**可以替换指定内容
  • 内部支持写表达式
  • {{ }}只会替换当前位置的文本
<div id="app">
          <h2 v-text='message +"!"'></h2>
          <h2 v-text='info+"!"'></h2>
          <h2>{{ message + '!'}}</h2>
     </div>
     <script>
          let app = new Vue({
               el:'#app',
               data:{
                    message:'有朝一日虎归山',
                    info:'定要血染半边天..'
               }
          })
     </script>
2-2 v-html指令
  • v-html指令官方文档:https://cn.vuejs.org/v2/api/#v-html
  • v-html指令的作用:设置元素的innerHTML
  • 内容中有HTML结构会被解析标签
  • v-html指令无论内容是什么,只会解析为文本
  • 解析文本使用 v-text,解析 HTML结构使用 v-html
<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>v-html指令</title>
     <!-- 1. 开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <!-- 2. html结构 -->
     <div id="app">
          <p v-html="content"></p>
          <p v-text="content1"></p>
     </div>
     <script>
          /* 3. 创建vue实例 */
          let app = new Vue({
               // el:挂载点
               el:'#app',
               // data:要渲染的数据
               data:{
                    content:'<a href="https://baike.baidu.com/item/%E8%89%BE%E6%81%A9/964824?fr=aladdin">艾恩</a>',
                    content1:'Ain'
               }
          })
     </script>
</body>
2-3 v-on指令(绑定事件)
2-3-1 v-on基本使用
<!-- 
    1.学习目标 :  v-on 指令
    2.学习路线
        a.作用:给元素绑定事件
		b.语法:
			标准语法:	v-on:事件名 = "方法名"
			简洁语法:	@事件名 = “方法名”
		c.注意点
			事件名就是元素事件名去掉on
			事件方法定义在vue实例的methods对象中
 -->
<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>v-on指令基础</title>
     <!-- 1. 开发环境版本,包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
     <!-- 2. html结构 -->
     <div id="app">
          <input type="button" value="v-on指令" v-on:click="Ain">
          <input type="button" value="v-on简写" @click="Ain">
     </div>
     <script>
          /* 3. 创建vue示例 */
          let app = new Vue({
               el: "#app",
               methods: {
                    Ain: function () {
                         alert('若是甘于平庸那你现在就放弃');
                    }
               },
          })
     </script>
</body>

</html>
2-3-2 v-on事件修饰符

如何控制事件只在某些特别条件下触发呢?

  • .stop
    • 阻止事件冒泡
  • .prevent
    • 阻止事件默认行为
  • keyup.xx
    • 只能是按xx键触发,例如keyup.enter是代表回车键触发
2-4 v-domel指令
  • 用法:

  • 拿到表单的值,给绑定的变量

  • 变量的值变了,也会影响到表单元素

    <表单元素 v-model="vue的变量"></表单元素>
    
2-5 vue实例中的this
  • 在Vue的方法里默认清空下this都是值当前Vue实例
  • 实例的data里的属性和methods里的方法都直接绑定在Vue实例一级xia,可以直接访问
2-6 v-bind指令基本用法

官网地址:https://cn.vuejs.org/v2/api/#v-bind

  • 作用:绑定行内属性,让行内属性的值不写死
  • 用法:v-bind:属性名=“变量名”
  • 简写: :属性名=“变量名”
  • 注意:一般绑定的都是变量名,要在vue的data里声明
2-7 v-bind指令对象用法
  • v-bind对象用法,主要在classstyle属性里

  • 用在class代表,绑定某个类名,控制它是否拥有

  • <div :class="{active:变量}">
        控制active是否拥有,变量为true拥有,为false不拥有
    </div>
    
  • 用在style代表绑定某个样式属性,给它一个动态的值

  • <div :style="{width:100px}">
        width 的值取变量值
    </div>
    
2-8 v-for指令
  • 作用:变量数组,根据数组生成对应的标签

  • 语法

    v-for="item in 数组名"
    v-for="(item,index) in 数组名"
    
  • item,index名字可以改动,但是左边的一定是元素,右边的一定是下标

  • v-for里面还可以嵌套v-for,相当于循环的嵌套

2-9 v-if,v-eles-if,v-lese指令
  • 根据条件决定是否渲染元素,满足条件渲染,不满足不渲染
  • v-if可以单独使用
  • v-if和v-else-if以及v-else的搭配必须是同级的兄弟关系
<div id="app">
          <button @click="arr.push('天空之城')">添加数组元素</button>
          <button @click="arr.pop()">删除元素</button>
          <ul>
               <!-- 
                    遍历arr这个数组,并把每个元素取出来(item)
                    item相当于是arr[i]
                    数组长度是级,就会遍历几次
               -->
               <li v-for="item in arr ">
                    {{ index }} ---- {{ item }}
                    <p>{{ item }}</p>
               </li>
          </ul>
     </div>

     <script src="./vue.js"></script>
     <script>
          new Vue({
               el:'#app',
               data:{
                    arr:['千与千寻', '你的名字', '天气之子', '龙猫']
               }
          })
     </script>

3- 今日总结

  • Vue的介绍
    • 是一套渐进式的js框架
    • 特点:只关注数据
  • 基本使用
    1. 导包
    2. 写HTML结构
    3. 创建Vue实例,实例化的时候传入一个对象
      • el:挂载某个元素交给vue管理
      • data: 保存vue数据
      • methods: 保存vue里的方法
  • v-text
    • 相当于innerText,给标签添加文本内容的,会覆盖原来内容
    • 遇到标签会变成纯文本
    • 局部替换文本:插值表达式{{数据}}
  • v-html
    • 相当于innerHTML
    • 解析标签为dom元素
    • 没有局部替换
    • 带标签的文本就叫富文本
  • v-model
    • 双向绑定
    • 在表单元素使用 inputtextareaselect
    • 输入的内容复制给数据,数据改变输入框的内容也改变
  • v-on
    • 事件绑定
    • v-on:事件名=“要执行的代码” 或者 v-on:事件名=“vue里定义的方法”
    • 简写: @事件名
  • 事件修饰符
    • .stop阻止冒泡
    • .prevent阻止默认行为
    • .entenr键盘按enter触发
  • vue里的this
    • 行内属性跟数据做绑定
    • 语法:v-bind:属性名=“属性值”
    • 简写: :属性名=“属性值”
    • 主要用在class和style styel={}width:100px
  • v-for
    • 遍历数组,根据数组去生成标签,v-for写那个标签,就代表生成那个标签
    • v-for里第一个是元素,第二个是下标
    • 通常写作 (item,index) in 数组名
    • item和index在当前标签内部都可以访问
  • v-if
    • 根据条件渲染
    • v-if搭配v-else-if和v-else时,是同级兄弟关系
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值