VUE学习之路(1)-vue实例-程序员宅基地

技术标签: vue学习  

1、数据绑定

1.1、添加html代码如下:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{
   { msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

1.2、添加script

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

1.3、结果信息

将页面中的<h1>{ { msg }}</h1>替换成<h1>Welcome to Your Vue.js App</h1>

2、对象绑定

2.1、添加html代码

<div id="app">  
    <h3>{
   {obj.name}}</h3>
  </div>
</template>

2.2、添加script

<script>
    export default {     
      data () {  
        return {
          msg: '你好vue',
          obj:{
            name:"张三",
            title:"我是一个标题"
          }
          
        }
      }
    }
</script>

2.3、展示效果

将<h3>{ {obj.name}}</h3>替换成<h3>张三</h3>

3、循环数组渲染数据

3.1、添加html

<template>
  <div id="app">  
    <ul>
      <li v-for="item in list">
          {
   {item}}
      </li>
    </ul>
  </div>
</template>

3.2、添加script

<script>
    export default {     
      data () {  
        return {
          list:['111','222','333']
        }
      }
    }
</script>

3.3、展示效果

<ul>
      <li>111</li><li>222</li><li>333</li>
    </ul>

4、绑定属性

4.1、添加html

<template>
  <div id="app">  
      <div v-bind:title="title">鼠标瞄上去看一下</div>
       <!-- 绑定属性 -->
       <img v-bind:src="url" />
  </div>
</template>

4.2、添加script

<script>
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue',
          title:'我是一个title',
          url:'https://www.baidu.com/'
        }
      }
    }
</script>

4.3展示效果

  <div id="app">  
      <div title="我是一个title">鼠标瞄上去看一下</div>
       <img v-bind:src="https://www.baidu.com/" />
  </div>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sinat_28789467/article/details/86599642

智能推荐

js class类简介_js class{}-程序员宅基地

文章浏览阅读1.7k次。问题描述:调用其中的方法、向其中添加方法 、定义变量、get和set问题分析:解决方案://定义类class Test { constructor(x, y) { this.x = x; this.y = y; } myFun1() { // 方法1 return (this.x + this.y); } myFun2() {..._js class{}

YOLO应用化之保存视频_yolov5保存检测后的视频流-程序员宅基地

文章浏览阅读1.1w次。YOLO 将检测结果保存为视频文件_yolov5保存检测后的视频流

layui按钮总结_layui-btn-primary-程序员宅基地

文章浏览阅读2.1w次,点赞4次,收藏16次。 layui按钮总结按钮类设置:class="layui-btn" ;不设置其它任何二级类名就是普通按钮1 主题类 :layui-btn-primary 原始主题。原始 class="layui-btn layui-btn-primary" 默认 class="layui-btn" ..._layui-btn-primary

因果分析.科学实验评估-程序员宅基地

文章浏览阅读9.1k次,点赞3次,收藏27次。目录1. A/B Test原理2. 实验分组划分3.实验指标设计4. 实验效果评估5.离线指标测算6.实验结果分析不是每个想法都是好的,大部分想法都是不好的。在互联网背景下,快速试错已经成为产品持续迭代的必备能力。借鉴传统行业(医学等)成熟的实验理论(因果推断),互联网逐渐发展了以AB Test为核心的数据驱动决策之路。在以下场景中可以考虑使用A/B Test:重大产品功能很难决策,不确定哪个方案效果最优。 "后验"成本高,如果改版失败,业务风险较大。通过 abtes_因果分析

pynvml 多gpu不能显示_pynvml不支持-程序员宅基地

文章浏览阅读2.3k次。pynvml 多gpu不能显示多个gpu时,只能显示一个gpu,解决方法,把cuda重新装。下面两种方法都能看有多少个gpu?import osimport pynvmlpynvml.nvmlInit()def usegpu(need_gpu_count=1): nouse = [] for index in range(pynvml.nvmlDevi..._pynvml不支持

随便推点

nginx流媒体服务器系统,搭建nginx流媒体服务器-程序员宅基地

文章浏览阅读417次。1. 安装ffmpeg$ git clone https://git.ffmpeg.org/ffmpeg.git ffmpeg$ sudo apt-get install yasm$ sudo ./configure --enable-shared --prefix=/usr/local/ffmpeg$ make$ sudo make install$ ffmpeg -version$ sudo ..._nginx配置流媒体

如何在vba中操作快捷键_vba中与ctrl d-程序员宅基地

文章浏览阅读4.5k次。整理答案如下: 问: 用VBA如何使快捷键失效,如使ctr+D(删除)失效? 按a執行宏TEST Application.OnKey "a", "TEST" 恢復按a正常功能 Application.OnKey "a" 按a不發生任何作業 Sub TEST3() Application.OnKey "a", "" End Sub ctl+C: "^c" ctl+V: "^v" Al_vba中与ctrl d

jquery实现tab切换_jquery写tab-程序员宅基地

文章浏览阅读721次。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;tab-JQ&lt;/title&gt; &lt;style&gt; * {margin: 0; paddi_jquery写tab

算法导论习题32.1-4解答-程序员宅基地

文章浏览阅读1.6k次。To determine if a pattern P with gap characters exists in T partition P into substrings P1, ..., Pk determined by the gap characters. Search for P1 and if found continue searching for P2 and so on. Th

java swing 下拉框增加回车事件-程序员宅基地

文章浏览阅读560次。用java swing做了一个密码管理系统,如下图: 最下面有一个输入框,是用于搜索的,有三种搜索方式:(1)通过Title(2)通过username(3)通过description在下拉框中选择。现在的需求是在输入框中输入要搜索的关键字后,选择下拉框,然后直接回车就进行搜索(对下拉框回车触发【search】按钮单击事件)。说明:下拉框JComboBox typeCom..._swing增加回车键事件

GET和POST两种基本请求方法的区别_get 和post有什么区别,get可以通过body 传递数据吗?-程序员宅基地

文章浏览阅读1k次,点赞4次,收藏6次。GET和POST两种基本请求方法的区别GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二。 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。 你可能自己写过无数个GET和POST请求,或者已经看过很多权威网站总结出的他们的区别,你非常清楚知道什么时候该用什么。 当你在面试中被问到这个问题,你的内心充满了自信和喜悦..._get 和post有什么区别,get可以通过body 传递数据吗?