vue02

vue02

什么是vue

渐进式js框架

优点

• 快速开发

脚手架的安装与使用

安装

• npm i -g @vue/cli
• yarn global add @vue/cli

使用

• 创建项目

  • vue create 项目名称

    • 注意事项：项目名称不能有特殊符号，中文，不能有大写字母

  • 根据提示

    • cd 项目名称
    • 启动脚手架 yarn serve

• 目录介绍

  • public

    • 静态目录

  • src

    • 业务文件夹（主要在这里写代码）

• 主要文件介绍及关系

  • 入口

    • src文件下的main.js

  • 页面的主要内容

    • app.vue

  • 浏览器运行的文件

    • index.html

  • 三者的关系

    • app.vue=>main.js=>index.html
    • main.js起到一个桥梁的作用

• 自定义配置

  • 端口配置

	 devServer:{
    port:3000,//端口改成3000
    open:true //自动打开浏览器
  },

 //将端口号改成3000

//学习过程中，关闭代码检查，有利于更好的学习
 lintOnSave:false,

• 单vue文件说明

  • template

    • 编写骨架
    • 注意事项，只能有一个根标签。在跟标签里面可以随意嵌套

  • style

    • 编写样式
    • 注意事项 需要配合scoped属性，保证样式只对当前的template内的标签生效

  • script

    • 编写动态交互效果

• 清理页面

  • 安装相关插件
  • 删除src目录下components里面的vue文件
  • 删除App.vue,内容，书写自己的内容

• 在浏览器安装vue相关扩展程序

vue指令

mvvm设计模式

• 什么是设计模式

  • 一套被反复使用，多人知晓的，代码经验的总结

• m

  • 数据

• v

  • 视图/页面

• vm

  • vue源码

插值表达式

• 语法{{ }}

  • 可以里面写变量，三元表达式，三元运算符等

 <template>
  <div>
   <div>{{ a }}</div>
   <div>{{ a + b }}</div>
   <div>{{ a > b ? a : b }}</div>
  </div>
</template>

• 需要在script标准中data()里面写相关数据

<script>
export default {
  data(){
    return {
      a:8,
      b:10
    }
  }
}
</script>

• 输出的结果

  • 8
    18
    10

指令

• 以v-开头，给标签添加额外的功能

• v-bind

  • 语法：

<img v-bind:src="imgurl" >

- 给标签属性设置vue变量的值
- 简写：:

• v-on

  • 语法：四种方式书写

<button v-on:click="count+=1">+1</button>
 <button v-on:click="fn1">-1</button>
 <button v-on:click="fn2(5)">+5</button>
 <button @click="fn3()">清零</button>

- 给标签绑定事件
- 简写：@

- 修饰符

	- 在事件的后面.修饰符名

		- 给事件带来更强大的功能

	- 语法@事件名.修饰符=’函数‘
	- .stop

		- 阻止事件冒泡

	- .prevent

		- 阻止默认行为

	- .once

		- 只触发一次事件处理函数

- 给键盘绑定事件

	- @keydown.enter=”函数“

		- 监听回车按键

	- @keydown.esc=”函数“

		- 监听esc按键

	- 更多修饰符
	- 
		- https://cn.vuejs.org/v2/guide/events.html

• 事件对象

 <a v-bind:href="url" @click="fn8(5,$event)">跳转到百度</a>
 
 
 fn8(num,e){
     e.preventDefault()
    },

- 阻止默认行为

• v-model

  • 双向绑定

    • 暂时只能在表单标签上
    • 把数据渲染到页面上
    • 页面上的数据渲染到数据里

  • 文本框，密码框，文本域使用方法

<input type="text" v-model="text">

 text:"",

- 选择框

<select v-model="select">
      <option value="北京">北京</option>
      <option value="南京">南京</option>
    </select>


	select:"",

- 单选框

<input type="radio" name="sex" id="" value="男 " v-model="radio">男
<input type="radio" name="sex" id="" value="女" v-model="radio">女
    

 radio:"",

- 复选框

<input type="checkbox" value="吃饭" v-model="check">吃饭
<input type="checkbox" value="睡觉" v-model="check">睡觉
<input type="checkbox" value="打豆豆" v-model="check">打豆豆

 check:[],

	- 注意事项

		- 非数组，是true或false
		- 数组，才会存值

- 修饰符

	- .number

		- 转化为数字类型

	- .trim

		- 去除首位空白

 <input type="text" v-model.number.trim="text"><br>

	- .lazy

		- 失去焦点时触发

<textarea name="" id="" cols="30" rows="10" v-model.lazy="txt"></textarea>