• 看看Vue

    Vue基础

    Vue简介

    1. 渐进式JavaScript框架
    2. 简化Dom操作
    3. 响应式数据驱动

    第一个Vue

    1. 导入开发版本的Vue.js
    2. 创建Vue实例对象，设置el属性和data属性
    3. 使用简洁的的模板语法把数据渲染到页面上

    el挂载点

    Vue实例的作用范围是什么？

    在el命中的元素内部

    是否可以使用其他的选择器？

    id选择器、 class选择器、标签选择器。一般使用id选择器，是唯一的不会命中多个元素。

    是否可以设置其他的dom元素?

    可以使用其他的双标签（比如

     

    ），但不要把id挂载到 body / html 上。

    data数据对象

    1. Vue要用到的数据定义在data中
    2. data中可以写复杂类型的数据
    3. 渲染复杂类型数据时，遵守js的语法即可（对象的点语法，数组类型的索引语法）。

    本地应用-通过Vue实现常见的网页效果，Vue指令

    v-text指令

    作用：设置标签的内容，默认会替换标签中全部内容，使用差值表达式可以替换局部\指定内容。

    v-html指令

    作用：设置innerHTML，内容中有html会被解析为标签。

    v-on指令 

    作用：为元素绑定事件 可以将 'v-on:' 简写成 '@'，绑定的方法写在methods属性中。

    v-show指令

    作用：根据真假切换元素的显示状态，其原理是修改元素的display，实现显示、隐藏，指令后面的内容最终都会解析成布尔值，true显示、false隐藏，数据改变之后，对应元素的显示状态对同步更新。

    v-if指令

    作用：根据表达式的真假切换元素的显示状态。本质是通过操作dom元素来切换显示状态。表达式的值为true，元素存在于dom树中，为false，从dom中移除。频繁的切换使用v-show，反之使用v-if，v-show切换消耗小。

    v-model

    作用：便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相关联，双向关联。

    MVVM模型

    M：模型(Model)：data中的数据

    V：视图(View)：模板代码

    VM：视图模型(ViewModel)：Vue实例

    data中所有的属性，最后都出现在了vm身上。

    vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

    记事本Demo

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     
    10.     <script src="../JS/vue.js">script>
    11. head>
    12.  
    13. <body>
    14.     <section id="todoapp">
    15.         <header class="header">
    16.             <h1>记事本h1>
    17.             
    18.             <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入"
    19.                 class="new-todo">
    20.         header>
    21.         <section class="main">
    22.             <ul class="todo-list">
    23.                 
    24.                 <li class="todo" v-for="(item,index) in list">
    25.                     <div class="view">
    26.                         
    27.                         <span class="index">{{ index+1 }}.span>
    28.                         <label>{{ item }}label>
    29.                         
    30.                         <button class="destory" @click="remove(index)">button>
    31.                     div>
    32.                 li>
    33.             ul>
    34.         section>
    35.         <footer class="footer">
    36.             <span class="todo-count"> <strong>{{ list.length }}strong> items left span>
    37.             
    38.             <button class="clear-completed" @click="clear">Clearbutton>
    39.         footer>
    40.     section>
    41.     <script>
    42.         // 创建Vue对象
    43.         var app = new Vue({
    44.             // 挂载容器todoapp
    45.             el: "#todoapp",
    46.             // 定义一个数组，初始值
    47.             data: {
    48.                 list: ["小行星", "放放风"],
    49.                 inputValue: "好好学习"
    50.             },
    51.             methods: {
    52.                 add: function () {
    53.                     //向数组中添加push输入的值
    54.                     this.list.push(this.inputValue);
    55.                 },
    56.                 remove: function (index) {
    57.                     //根据索引删除1行
    58.                     this.list.splice(index, 1);
    59.                 },
    60.                 clear: function () {
    61.                     //将数组置为空
    62.                     this.list = [];
    63.                 }
    64.             }
    65.         })
    66.     script>
    67. body>
    68.  
    69. html>

    效果

    实现新增，删除 ，计数，清空

    天气预报Demo

    页面

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    8.   <title>天知道title>
    9.   
    10.   <script src="../JS/vue.js">script>
    11.   
    12.   <link rel="stylesheet" href="css/reset.css" />
    13.   <link rel="stylesheet" href="css/index.css" />
    14. head>
    15.  
    16. <body>
    17.   <div class="wrap" id="app">
    18.     <div class="search_form">
    19.       <div class="logo"><img src="img/logo.png" alt="logo" />div>
    20.       <div class="form_group">
    21.         
    22.         <input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="queryWeather" />
    23.         
    24.         <button class="input_sub" @click="queryWeather">
    25.           搜 索
    26.         button>
    27.       div>
    28.       <div class="hotkey">
    29.         <a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}a>
    30.       div>
    31.     div>
    32.     <ul class="weather_list">
    33.       <li v-for="(item,index) in forecastList" :key="item.date" :style="{transitionDelay:index*100+'ms'}">
    34.         <div class="info_type">
    35.           
    36.           <span class="iconfont">{{ item.type }}span>
    37.         div>
    38.         <div class="info_temp">
    39.           <b>{{ item.low}}b>
    40.           ~
    41.           <b>{{ item.high}}b>
    42.  
    43.         div>
    44.         <div class="info_date">
    45.           <span>{{ item.date }}span>
    46.         div>
    47.       li>
    48.     ul>
    49.   div>
    50.   
    51.   <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    52.   <script>
    53.     new Vue({
    54.       el: "#app",
    55.       data: {
    56.         city: "武汉",
    57.         forecastList: [],
    58.         hotCitys: ["北京", "上海", "广州", "深圳"]
    59.       },
    60.       methods: {
    61.         queryWeather() {
    62.           this.forecastList = [];
    63.           axios
    64.             // 使用get方式传参
    65.             .get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
    66.             .then(res => {
    67.               console.log(res);
    68.               // 拿到forecast中的数据
    69.               this.forecastList = res.data.data.forecast;
    70.             })
    71.             .catch(err => {
    72.               console.log(err);
    73.             })
    74.             .finally(() => { });
    75.         },
    76.         clickSearch(city) {
    77.           this.city = city;
    78.           this.queryWeather();
    79.         }
    80.       }
    81.     });
    82.   script>
    83. body>
    84.  
    85. html>

    样式CSS

    1. body{
    2.     font-family:'Microsoft YaHei';   
    3. }
    4. .wrap{
    5.     position: fixed;
    6.     left:0;
    7.     top:0;
    8.     width:100%;
    9.     height:100%;
    10.     /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */
    11.     /* background:#8fd5f4; */
    12.     /* background: linear-gradient(#6bc6ee, #fff); */
    13.     background:#fff;
    14.  
    15. }
    16. .search_form{
    17.     width:640px;
    18.     margin:100px auto 0;
    19. }
    20. .logo img{
    21.     display:block;
    22.     margin:0 auto;
    23. }
    24. .form_group{
    25.     width:640px;
    26.     height:40px;
    27.     margin-top:45px;
    28. }
    29. .input_txt{
    30.    width:538px;
    31.    height:38px;
    32.    padding:0px;
    33.    float:left;
    34.    border:1px solid #41a1cb;
    35.    outline:none;
    36.    text-indent:10px;
    37. }
    38.  
    39. .input_sub{
    40.     width:100px;
    41.     height:40px;
    42.     border:0px;
    43.     float: left;
    44.     background-color: #41a1cb;
    45.     color:#fff;
    46.     font-size:16px;
    47.     outline:none;
    48.     cursor: pointer;
    49.     position: relative;
    50. }
    51. .input_sub.loading::before{
    52.     content:'';
    53.     position: absolute;
    54.     left: 0;
    55.     top: 0;
    56.     width: 100%;
    57.     height: 100%;
    58.     background: url('../img/loading.gif');
    59. }
    60.  
    61. .hotkey{
    62.     margin:3px 0 0 2px;
    63. }
    64.  
    65. .hotkey a{
    66.     font-size:14px;
    67.     color:#666;
    68.     padding-right:15px;
    69. }
    70. .weather_list{
    71.     height:200px;
    72.     text-align:center;
    73.     margin-top:50px;
    74.     font-size:0px;
    75. }
    76. .weather_list li{
    77.     display:inline-block;
    78.     width:140px;
    79.     height:200px;
    80.     padding:0 10px;
    81.     overflow: hidden;
    82.     position: relative;
    83.     background:url('../img/line.png') right center no-repeat;
    84.     background-size: 1px 130px;
    85. }
    86.  
    87. .weather_list li:last-child{
    88.     background:none;
    89. }
    90.  
    91. .info_date{
    92.     width:100%;
    93.     height:40px;
    94.     line-height:40px;
    95.     color:#999;
    96.     font-size:14px;
    97.     left:0px;    
    98.     bottom:0px;    
    99.     margin-top: 15px;
    100. }
    101. .info_date b{
    102.     float: left;
    103.     margin-left:15px;
    104. }
    105.  
    106. .info_type span{
    107.     color:#fda252;
    108.     font-size:30px;
    109.     line-height:80px;
    110. }
    111. .info_temp{
    112.     font-size:14px;  
    113.     color:#fda252;
    114. }
    115. .info_temp b{
    116.     font-size:13px;
    117. }
    118. .tem .iconfont {
    119.     font-size: 50px;
    120.   }
    1. body,ul,h1,h2,h3,h4,h5,h6{
    2.     margin: 0;
    3.     padding: 0;
    4. }
    5. h1,h2,h3,h4,h5,h6{
    6.     font-size:100%;
    7.     font-weight:normal;
    8. }
    9. a{
    10.     text-decoration:none;
    11. }
    12. ul{
    13.     list-style:none;
    14. }
    15. img{
    16.     border:0px;
    17. }
    18.  
    19. /* 清除浮动，解决margin-top塌陷 */
    20. .clearfix:before,.clearfix:after{
    21.     content:'';
    22.     display:table;    
    23. }
    24. .clearfix:after{
    25.     clear:both;
    26. }
    27. .clearfix{
    28.     zoom:1;
    29. }
    30.  
    31. .fl{
    32.     float:left;
    33. }
    34. .fr{
    35.     float:right;
    36. }

    效果

    实现点击搜索查询，回车查询

  • 相关阅读:
    深度学习零基础教程
    LINUX下看门狗的使用
    rh358 002 fact变量获取 ansible配置网络 service_facts
    QT+OSG/osgEarth编译之十八：geos+Qt编译（一套代码、一套框架，跨平台编译，版本：geos-3.11.0）
    【32-业务开发-基础业务-规格参数-保存数据-查询数据-更新操作之数据回显展示-更新操作-前后端项目交互整合与测试-总结收获】
    Head First设计模式中的典型设计模式解析与案例分析
    基于工程车辆/物流车辆/消防车辆远程通信的车队管理解决方案
    【kubernetes】使用virtual-kubelet扩展k8s
    ubuntu20.04桌面蓝屏问题解决
    TS中null和undefined特殊性
  • 原文地址：https://blog.csdn.net/Ipkiss_Yongheng/article/details/126465315