vue.js

文本差值的语法结构：{{obj:age}} 获取obj中的age信息写插入到文本中；{{}} 这种文本插值的语法,不但可以渲染数据,还可以在{{}} 中写一些简单的逻辑 。

vue.js 01.day

• Vue叫做vue.js是一款基于js开发的前端框架
  • 框架:就是一些写好的很好方法和属性,我们可以直接使用,为了就是提高我们的开发效率
• Vue的简介
  • 创建前端页面
• vue的安装
  • vue.js的使用
    • 1.直接下载到本地
      • 起步
      • 安装
      • 版本
        • 开发版本:我们在开发开发阶段,使用这个版本,里面有错误警告警告和提示
        • 生产版本:项目项目已经已经上线之后,使用该版本,屏蔽了一些错误些和警告
    • 2.直接直接引入Vue提供提供的cdn链接,引入在线的Vue
      • 起步
      • 往下滑动
      • 两个链接直接引用
• vue和jq的区别
  • jq是把原生js的属性或者是对象或方法 进行简单简单化了,操作节点,找对象,和js原理一样,要需要先 找对象 改属性 jq和原生js都是操作节点
  • vue 不是直接操作节点,我们玩的是数据
• vue使用
  • 创建.html的文件
  • 1.script
    • 引入vue
  • 2.script
  • new Vue({
    • el:"#id名",
      • vue的使用范围,只能操作 id名元素中的代码
      • 尽可能不适用class,因为他并不是唯一的
    • data:{ 用于存储数据
      • name:xxx,
      • obj:}
        • age:19,
        • sex:男
          • 存储在数据库中的性别,一般使用数字来表示, 1代表男.0代表女
          • 因为数字点的大小小于汉字
          • 使用三元运算符
          • {{obj,sex==1?"男":"女"}}
      • }
    • }
  • })
• vue的渲染
  • {{}}
    • 文本差值的语法结构
      • {{data中的键}} 例:{{name}}
      • {{obj:age}} 获取obj中的age信息写插入到文本中
      • {{}} 这种文本插值的语法,不但可以渲染数据,还可以在{{}} 中写一些简单的逻辑 <p>性别:{{obj.sex == 1 ? "男" : "女"}}</p>
    • 文本插值语法也可以有运算 <p>{{num+20}}</p>
• 你得知道表单中用户实时输入的数据是什么,
  • 原生js
    • <input type="text" id="ins"/> <h2 id="hs"></h2>
    • 获取input对象 let ins = document.getElementById("ins"); let hs = document.getElementById("hs");使用的是表单中的 oninput事件 ins.oninput = function(){ //console.log(123); // 获取表单中输入的数据 let inval = ins.value; console.log(inval); //把表单中的数据写入到h2标签中 hs.innerHTML = inval; }
      • 1.你得知道表单中用户实时输入的数据是什么,使用的是表单中的 oninput事件 // oninput 事件 当表单中输入发生改变的时候触发该事件
  • vue
    • <div id="app"> <input type="text" v-model="str"> <h2>{{str}}</h2> </div>
    • new Vue({ el:"#app", data:{ str:"" } })
• 系统指令
• 在vue中如何声明方法:
  • 语法格式: new Vue({ el:"", data:{}, methods:{ 方法名:function([形参]){ }, 或者简写为: 方法名([形参]){ 函数体 return 将函数的执行结果返回到调用处 } } })
  • 关于vue中的方法如何调用:
    • 1.直接在vue操作范围内使用文本插值的语法进行调用函数
      • {{方法名()}}
    • 2.调用方法的第二种方式:
      • 2.1 在vue中如何使用事件: 给元素绑定事件有两种方式:
        • 1.使用系统指令 v-bind:事件 = "方法名()"
        • 2.使用@进行事件绑定 @事件名 = "方法名()" 推荐使用
• 如何在函数中获取到data中的数据
  • data:{ 键:值 }, methods:{ 方法名(){ 获取data中的数据的值 : this.键 我们想象,可以在方法中获取data中的数据,那么我们能否修改data中的数据 } }
• 使用原生js
  • let box=