IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue 基础 -> 正文阅读

[JavaScript知识库]Vue 基础

1.<span title="xxxx"></span>标签:

当被span标签包裹时,前端将鼠标放在控件上就能显示出其title属性:

2.v-bind: 将数据绑定为属性值;{{truth}}将数据插入展示。可以缩写为:

v-xxx开头的叫Vue指令

效果:

3. v-if:条件判断控制,每次都会重新删除和创建元素(开销较大)

? ? ? ? v-if=true

? ? ? ? ? ? ? ? 效果:

? ? ? ? ?v-if=false:

? ? ? ? ?效果:

?4. v-show: 每次不会重新进行dom的删除和创建操作,只会切换元素的display:none属性

5. v-if ---->v-else-if----->v-else:vue中的条件语句

? ? ? ? ? ? ? ? 当条件满足哪个标签,就执行哪个标签的代码

? ? ? ? ? ? ? ? ? ? ? ? 效果:

?6. v-for :vue中的for循环

? ? ? ? 1.新建vue组件projects.vue:

? ? ? ? ? ? ? ? 未使用v-for循环:

<template>
  <table>
    <tr>
      <th>项目名称</th>
      <th>项目负责人</th>
      <th>应用名称</th>
    </tr>
    <tr>
      <td>项目1111</td>
      <td>chuntian</td>
      <td>吃饱了撑的app</td>
    </tr>
    <tr>
      <td>项目2222</td>
      <td>22222</td>
      <td>走吧222</td>
    </tr>
    <tr>
      <td>项目3333</td>
      <td>3333</td>
      <td>奔跑吧3333</td>
    </tr>
  </table>
</template>

<script>
export default {
  name: "new_vue"
}
</script>

<style scoped>
table{
  margin:100px auto;
  border-collapse: collapse;
  width: 40%;
}

</style>

? ? ? ? ?2.在App.vue根组件中导入子组件new_vue.vue:

????????????????1,2,3

<!--tempalet 部分用于展示给用户,相当于MVVM模式中的V-->
<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
<!--3. 引用-->
    <projects></projects>
  </div>
</template>

<!--script标签内是js组件  -->
<script>
//1. 导入
import projects from "./components/projects"

export default {
  // 定义组件名称
  name: 'App',
  //2. 声明
  components: {
    projects,
  }

}
</script>

<!--style标签内:视图的样式-->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

????????效果:

?使用v-for循环:

????????使用v-for 循环时,需要使用v-bind:key="key"来绑定key值,形式如下

<template>
  <table>
    <tr>
      <!-- 使用v-for 循环时,需要使用v-bind:key="key"来绑定key值,形式如下-->
      <th v-for="(project_head,key) in projects_head" :key="key">{{project_head}}</th>
    </tr>
    <tr v-for="(project,key) in projects" :key="key">
      <td >{{project.name}}</td>
      <td >{{project.leader}}</td>
      <td >{{project.app_name}}</td>
    </tr>
  </table>
</template>

<script>
export default {
  name: "projects",
  data() {
    return {
      projects_head: ["项目名称", "项目负责人", "应用名称"],
      projects:[
        {name:"项目1111",leader:"chuntian",app_name:"吃饱了撑的app"},
        {name:"项目2222",leader:"22222",app_name:"走吧222"},
        {name:"项目3333",leader:"3333",app_name:"奔跑吧3333"},
      ]
    }
  }
}

</script>

<style scoped>
table{
  margin:100px auto;
  border-collapse: collapse;
  width: 40%;
}

</style>

????????效果:

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-19 11:53:09  更:2022-05-19 11:54:05 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 19:44:25-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码