• vue 基础语法（二）

    12-(掌握)插值操作-mustache语法

    2.   <div id="app">
    3.     <h3>{{msg}}h3>
    4.     <h3>{{msg}}，李银河h3>
    5.     
    6.     <h3>{{firstName+"·"+lastName}}h3>
    7.     <h3>{{firstName}} {{lastName}}h3>
    8.     <h4>{{counter*2}}h4>
    9.   div>
    10.   
    11.   <script src = "./js/vue.js">script>
    12.   <script>
    13.     /**
    14.      * 插值操作
    15.      * 1、{{}}  mustache  双大括号语法  数据是响应的
    16.     */ 
    17.    
    18.     const app =  new Vue({
    19.       el:"#app",
    20.       data:{
    21.         msg:"你好呀",
    22.         firstName:"乌拉那拉",
    23.         lastName:"宜修",
    24.         counter:100
    25.       }
    26.     })
    27.  
    28.   script>

     13-(掌握)插值操作-其他指令使用

    2.   
    3.   <div id="app" v-cloak>
    4.     <h3>{{msg}}h3>
    5.     <h3 v-once>{{msg}}h3>
    6.     <div v-html = "url">div>
    7.     <h2 v-text = "msg">h2>
    8.     <h2 v-pre >{{msg}}h2>
    9.   div>
    10.   
    11.   <script src = "./js/vue.js">script>
    12.   <script>
    13.     /**
    14.      * 插值操作 其他指令
    15.      * 1、v-once  
    16.      * 2、v-html
    17.      * 3、v-text  一般不适用，因为它不够灵活
    18.      * 4、v-pre  原封不动的展示内容 用的也很少
    19.      * 5、v-cloak  cloak:斗篷   没啥意义，仅做了解
    20.      * 
    21.      * 在vue解析之前，div有v-cloak 属性
    22.      * 在vue解析之后，div中没有v-cloak 属性 
    23.     */ 
    24.    
    25.     const app =  new Vue({
    26.       el:"#app",
    27.       data:{
    28.         msg:"你好呀",
    29.         url:"百度一下",
    30.       }
    31.     })
    32.  
    33.   script>

    14-(掌握)v-bind的基本使用

    1. body>
    2.   
    3.   <div id="app" v-cloak>
    4.     <h3>{{msg}}h3>
    5.     <img v-bind:src="imgurl" alt="">
    6.     <a v-bind:href="aHref">百度一下a>
    7.     
    8.     <a :href="aHref">百度一下a>
    9.   div>
    10.   
    11.   <script src = "./js/vue.js">script>
    12.   <script>
    13.     /**
    14.      * v-bind  动态绑定属性  
    15.      * 给哪个属性绑定值，就在那个属性前面加 v-bind:
    16.      * 语法糖： v-bind:href => :href
    17.     */ 
    18.    
    19.     const app =  new Vue({
    20.       el:"#app",
    21.       data:{
    22.         msg:"你好呀",
    23.         imgurl:"https://v2.cn.vuejs.org/images/lifecycle.png",
    24.         aHref:"http://www.baidu.com"
    25.       }
    26.     })
    27.  
    28.   script>
    29. body>

    15-(掌握)v-bind动态绑定class(对象语法)【注意案例里面的简单写法】

    2.   
    3.   <div id="app" v-cloak>
    4.     
    5.     
    6.     
    7.     
    8.     <div :class = "{active:isActive,line:isLine}">测试div>
    9.     
    10.     <div class = "title" :class = "{active:isActive,line:isLine}">测试div>
    11.     
    12.     <div class = "title" :class = "getClass()">测试div>
    13.     
    14.     <button :class = "{changeColor:isChangeColor}" @click = "clickFn">按钮button>
    15.   div>
    16.   
    17.   <script src = "./js/vue.js">script>
    18.   <script>
    19.     /**
    20.      * v-bind  动态绑定class (对象语法)
    21.      * 1、 v-bind:class = "{'类名1':boolean,'类名2':boolean}"
    22.      * 2、如果类名太长，可以写在computed里面或者methods里面
    23.     */ 
    24.    
    25.     const app =  new Vue({
    26.       el:"#app",
    27.       data:{
    28.         msg:"hello world",
    29.         active:"active",
    30.         isActive:true,
    31.         isLine:true,
    32.         isChangeColor:false,
    33.         counter:0
    34.       },
    35.     
    36.       methods:{
    37.         getClass(){
    38.           return {active:this.isActive,line:this.isLine}
    39.         },
    40.         clickFn(){
    41.           // 注意这里的一个简单写法
    42.           // this.counter++;
    43.           // if(this.counter%2==0){
    44.           //   this.isChangeColor = false
    45.           // }else{
    46.           //   this.isChangeColor = true
    47.           // }
    48.           this.isChangeColor = !this.isChangeColor
    49.         }
    50.       }
    51.     })
    52.  
    53.   script>

    16-(了解)v-bind动态绑定class(数组语法)  【仅做了解，用的很少】

    2.   
    3.   <div id="app" v-cloak>
    4.     
    5.     
    6.     <div class="title" :class = "['active','line']">{{msg}}div>
    7.     
    8.     <div class="title" :class = "[active,line]">{{msg}}div>
    9.     
    10.     <div class="title" :class = "getClasses()">{{msg}}div>
    11.   div>
    12.   
    13.   <script src = "./js/vue.js">script>
    14.   <script>
    15.     /**
    16.      * v-bind  动态绑定class (数组语法)
    17.      * 1、多个类名可以写在computed或者methods里面
    18.     */ 
    19.    
    20.     const app =  new Vue({
    21.       el:"#app",
    22.       data:{
    23.         msg:"hello world",
    24.         active:"aaa",
    25.         line:"bbb"
    26.       },
    27.     
    28.       methods:{
    29.         getClasses(){
    30.           return [this.active,this.line]
    31.         }
    32.       }
    33.     })
    34.  
    35.   script>

     17-(完成)v-bind和v-for结合的作业布置

    2.   
    3.   <div id="app" v-cloak>
    4.     <ul>
    5.       <li v-for = "(item,index) of movies" :class = "{active:currentIndex == index}"  @click = "clickFn(index)">{{item}}li>
    6.     ul>
    7.   div>
    8.   
    9.   <script src = "./js/vue.js">script>
    10.   <script>
    11.     /**
    12.      * v-bind 和 v-for 小作业：
    13.      * 实现列表，默认第一个高亮，然后点击哪个哪个高亮
    14.     */ 
    15.    
    16.     const app =  new Vue({
    17.       el:"#app",
    18.       data:{
    19.         msg:"hello world",
    20.         movies:["甄嬛传","芈月传","如懿传"],
    21.         currentIndex:0
    22.       },
    23.     
    24.       methods:{
    25.         clickFn(index){
    26.           this.currentIndex = index
    27.         }
    28.       }
    29.     })
    30.  
    31.   script>

    18-(掌握)v-bind动态绑定style(对象语法)

    2.   
    3.   <div id="app" v-cloak>
    4.     
    5.     
    6.     
    7.     <div :style = "{fontSize:fontSize}">{{msg}}div>
    8.     <div :style = "{'font-size':fontSize}">{{msg}}div>
    9.     <div :style = "{'font-size':finalSize+'px'}">{{msg}}div>
    10.     <div :style = "{'font-size':fontSize,color:finalColor}">{{msg}}div>
    11.     <div :style = "getStyles()">{{msg}}div>
    12.   div>
    13.   
    14.   <script src = "./js/vue.js">script>
    15.   <script>
    16.     /**
    17.      * v-bind 动态绑定style(对象语法)
    18.      * 在组件化开发中用的多一些
    19.      * 对象语法用的比较多
    20.      * 属性太多可以抽离到methods或者computed里面
    21.      *    */ 
    22.    
    23.     const app =  new Vue({
    24.       el:"#app",
    25.       data:{
    26.         msg:"hello world",
    27.         fontSize:"28px",
    28.         finalSize:52,
    29.         finalColor:"red"
    30.       },
    31.     
    32.       methods:{
    33.         getStyles(){
    34.           return {'font-size':this.fontSize,color:this.finalColor}
    35.         }
    36.       }
    37.     })
    38.  
    39.   script>

    19-(了解)v-bind动态绑定style(数组语法)

     

     20-(掌握)计算属性的基本使用 【计算属性是当做属性使用的，使用的时候不需要加（）】

    2.   
    3.   <div id="app">
    4.     <div>{{firstname}} {{lastname}}div>
    5.     <div>{{firstname+" "+lastname}}div>
    6.     <div>{{getFullName()}}div>
    7.     <div>{{fullName}}div>
    8.   div>
    9.   
    10.   <script src = "./js/vue.js">script>
    11.   <script>
    12.     /**
    13.      * 计算属性：当我们要对某种数据进行变化的时候再来进行显示的话，可以使用computed
    14.      * 计算属性是当做属性使用的，使用的时候不需要加（）
    15.      *    */ 
    16.    
    17.     const app =  new Vue({
    18.       el:"#app",
    19.       data:{
    20.         firstname:"hello",
    21.         lastname:"world"
    22.       },
    23.       computed:{
    24.         // 计算属性一般不加动词
    25.         fullName(){
    26.           return this.firstname+" "+this.lastname;
    27.         }
    28.       },
    29.       methods:{
    30.         getFullName(){
    31.           return this.firstname+" "+this.lastname;
    32.         }
    33.       }
    34.     })
    35.  
    36.   script>

    21-(掌握)计算属性的复杂操作

    2.   
    3.   <div id="app">
    4.     <div>{{firstname}} {{lastname}}div>
    5.     <div>{{firstname+" "+lastname}}div>
    6.     总价格：{{totalPirce}}
    7.   div>
    8.   
    9.   <script src = "./js/vue.js">script>
    10.   <script>
    11.     
    12.     const app =  new Vue({
    13.       el:"#app",
    14.       data:{
    15.         firstname:"hello",
    16.         lastname:"world",
    17.         books:[
    18.           {
    19.             id:"001",
    20.             name:"unix编程艺术",
    21.             price:1
    22.           },
    23.           {
    24.             id:"002",
    25.             name:"代码大全",
    26.             price:2
    27.           },
    28.           {
    29.             id:"003",
    30.             name:"深入理解计算机组成原理",
    31.             price:3
    32.           },
    33.           {
    34.             id:"004",
    35.             name:"现代操作系统",
    36.             price:4
    37.           },
    38.         ]
    39.       },
    40.       computed:{
    41.         totalPirce(){
    42.           let totalCount = 0
    43.           // 第一种写法
    44.           // this.books.map(item=>{
    45.           //   totalCount=Number(totalCount)+Number(item.price);
    46.           // });
    47.           // 第二种 原始写法
    48.           // for(let i = 0;i
    49.           //   totalCount=Number(totalCount)+Number(this.books[i].price);
    50.           // }
    51.           // es6 for循环 in 
    52.           // for(let i in this.books){
    53.           //   totalCount=Number(totalCount)+Number(this.books[i].price);
    54.           // }
    55.           // es6 for循环 of 
    56.           for(let book of this.books){
    57.             totalCount=Number(totalCount)+Number(book.price);
    58.           }
    59.           return totalCount
    60.         }
    61.       }
    62.     })
    63.  
    64.   script>
    65. body>

    22-(了解)课堂回顾

    1、邂逅vue.js:

    认识vue, vue的读音，为啥学vue,  什么是渐进式，vue特点， 

    2、安装vue(3中方式）

    3、vue初体验：三个案例:

    • mustache 语法， 体验vue响应式，
    • vue列表展示，v-for 
    • vue计数器小案例  ，事件监听，@click

    4、vue中的mvvm

    5、创建vue  option 可以放那些东西【el, data, methods, lifestyle】

    6、插值语法（mustache，v-html,, v-text, v-once, v-pre, v-cloak）

    7、v-bind 绑定基本属性

    8、v-bind 动态绑定class【对象语法和数组语法】 列表小作业

    9、v-bind 动态绑定style【对象语法和数组语法】

    10、computed 讲解两个案例

  • 相关阅读:
    crm系统哪家好？
    mac安装mysql，php，nginx，phpmyadmin，配置访问数据库
    【51单片机实验笔记】前篇（三） 模块功能封装汇总（持续更新）
    pdf文件大小超过限制怎么办？一招教你压缩pdf文件
    【CQF Finance Class 1 现金时间价值】
    一个混乱千万级软件项目
    前端——Vue响应式适配
    vite + vue3.0 + ts 项目搭建
    好用到哭！没想到听书神器这么适合我~
    go语言有哪些web框架
  • 原文地址：https://blog.csdn.net/qq_37299479/article/details/126518183