首页 > 其他分享 >Vue入门简易命令

Vue入门简易命令

时间:2022-10-25 22:12:10浏览次数:46  
标签:Vue console 入门 简易 log key var name

Vue入门简易命令

style和class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./JS/vue.js"></script>
    <style>
        .greenyellow {
            background-color: greenyellow;
        }

        .size {
            font-size: 40px
        }
    </style>
</head>
<body>
<div id="app01">
    <h1>class的使用方式</h1>
    <div :class="classStr">
        class就在这里验证
    </div>
    <div :class="classList">
        class就在这里验证
    </div>
    <div :class="classObj">
        class就在这里验证
    </div>
    <h1>style的使用方式</h1>
    <div :style="styleStr">
        style就在这里验证
    </div>
    <div :style="styleList">
        style就在这里验证
    </div>
    <div :style="styleObj">
        style就在这里验证
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app01',
        data: {
            calssStr: 'greenyellow',
            classList: ['greenyellow','size'],
            classObj: {greenyellow: true, size: false},
            styleStr:'backgroundColor:orange;fontSize:60px',
            styleList:[{backgroundColor:'pink'},{'font-size':'50px'}],
            styleObj:{backgroundColor: 'red',fontSize:'100px'}
        }
    })
</script>
</html>

条件渲染

  • 写在标签上,控制标签的显示与不显示
  • v-if='布尔值/运算完成是布尔值'
  • v-else-if='布尔值/运算完成是布尔值'
  • v-else
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
    <h1>条件渲染</h1>
    <div v-if="score>=10000">王者</div>
    <div v-else-if="score>=8000 && score<10000">宗师</div>
    <div v-else-if="score>=7000 && score<8000">大师</div>
    <div v-else-if="score>=6000 && score<7000">钻石</div>
    <div v-else-if="score>=5000 && score<60000">铂金</div>
    <div v-else-if="score>=4000 && score<50000">黄金</div>
    <div v-else-if="score>=3000 && score<40000">白银</div>
    <div v-else-if="score>=2000 && score<30000">青铜</div>
    <div v-else>黑铁</div>
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app01',
        data:{

            score:99999
        }
    })
</script>
</html>

列表渲染

  • v-for: 放在标签上,可以循环显示多个此标签
# v-for 可以循环数组,数字,字符串,对象
	v-for="key in obj"
    	-如果是数组:key就是数组的一个个元素
        -如果是数字:key就是从1开始的一个个数字
        -如果是字符串:key就是一个个字符
        -如果是对象:key就是一个个value的值
	v-for="(key,value) in obj" 
		-如果是数组:key就是数组的一个个元素,value就是索引
        -如果是数字:key就是从1开始的一个个数字,value就是索引
        -如果是字符串:key就是一个个字符,value就是索引
        -如果是对象:key就是一个个value的值,value就是一个个key
        
        
        
 # 每次循环的标签上,一般都会带一个属性:      :key='值必须唯一'
	-key值得解释:为了加速虚拟dom的替换
    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
    <div class="container-fluid">
        <div class="row top">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center" style="margin-bottom: 40px">
                    <button @click="handleClick" class="btn btn-danger">加载购物车</button>
                </div>
                <div v-if="shopList.length>0">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>商品编号</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="shop in shopList">
                            <th>{{shop.id}}</th>
                            <th>{{shop.name}}</th>
                            <th>{{shop.price}}</th>
                            <th>{{shop.count}}</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div v-else>
                    购物车空荡荡(地狱空荡荡,魔鬼在人间)
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app01',
        data:{
            shopList:[]
        },
        methods:{
            handleClick(){
                this.shopList = [{id:1, name:'比亚迪',price:'700000元',count:1},
                {id:2, name:'索尼相机',price:'7688元',count:1},
                {id:3, name:'吉他',price:'4399元',count:1},
                {id:4, name:'苹果笔记本',price:'48900元',count:1},
                {id:5, name:'华为手机',price:'12000元',count:1},
                ]
            }
        }
    })
</script>
</html>

v-for循环数组,循环字符串,数字,对象等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
  <h1>数组的检测与更新</h1>
  <button @click="handleClick">点我追加友商</button>|
  <button @click="handleClick1">点我追加一大批友商</button>|
  <button @click="handleClick2">点我修改数组页面的变化</button>
  <p v-for="firm in company">{{firm}}</p>
  <h1>对象的检测与更新</h1>
  <button @click="handleClick3">点我追加money</button>|
  <button @click="handleClick4">点我追加money</button>|
  <p v-for="(value, key) in obj">{{key}}-*-*-*-{{value}}</p>
</div>
</body>
<script>
  var vm = new Vue({
    el:'#app01',
    data:{
      company:['小米','华为','海思','百度','腾讯','阿里','字节','bilibili'],
      obj:{'name':'joseph', age:21}
    },
    methods:{
      handleClick(){
        this.company.push('宁德时代')
      },
      handleClick1(){
        var a = this.company.concat(['比亚迪', '京东', '万达'])
        console.log(a)
      },
      handleClick2(){
        Vue.set(this.company,0,'介似嘛')  # 监控到变化
      },
      handleClick3(){
        this.obj.money = '10000000'
        console.log(this.obj)  # 监控不到变化
      },
      handleClick4(){
        Vue.set(this.obj,'money',1000000)
      }
    }
  })
</script>
</html>

数组的检验与更新

双向数据绑定

  • input标签 -model,双向数据绑定
  • 使用 属性指令绑定:value='变量' 是数据的单向绑定
  • v-model='name':数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
  <h1>数据的双向绑定</h1>
  <p>用户名:
    <input type="text" v-model="name">
  </p>
  <p>密码:
    <input type="password" v-model="password">
  </p>
    <button @click="handleSubmit">提交</button>{{err}}
</div>
</body>
<script>
  var vm = new Vue({
    el:'#app01',
    data:{
      name:'',
      password:'',
      err:''
    },
    methods:{
      handleSubmit(){
        console.log(this.name, this.password)
        this.err='从户名或密码错误'
      }
    }
  })
</script>
</html>

事件处理

  • 事件绑定 v-on:事件='函数' 简写 @事件名='函数'
  • input 三种事件
    • blur: 失去焦点事件
    • change: 发生变化触发
    • input: 输入触发
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
    <h1>input的事件处理</h1>
    <h2>blur</h2>
    <p><input type="text" v-model="name" @blur="handleBlur">--*--{{name}}</p>
    <h2>change</h2>
    <p><input type="text" v-model="name1" @change="handleChange">--*--{{name1}}</p>
    <h2>input</h2>
    <p><input type="text" v-model="name2" @input="handleInput">--*--{{name2}}</p>
</div>
</body>
<script>
    var vm = new Vue ({
        el: '#app01',
        data: {
            name: '',
            name1: '',
            name2: ''
        },
        methods: {
            handleBlur() {
                console.log('失去焦点了,触发Blur执行', this.name)
            },
            handleChange() {
                console.log('发生变化,触发了Change执行', this.name1)
            },
            handleInput() {
                console.log('输入了内容,触发了Input执行', this.name2)
            }
        }
    })

</script>
</html>

过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>过滤案例</h1>
  <p><input type="text" v-model="search" placeholder="请输入您需要搜索的内容" @input="handleSearch"></p>
  <ul>
    <li v-for="item in newdataList">{{item}}</li>
  </ul>
</div>
</body>
<script>
  var vm = new Vue({
    el:'#app01',
    data:{
      search:'',
      dataList:[
              'a',
              'black',
              'pink',
              'blue',
              'emo',
              'orange',
              'write',
              'yellow',
              'green',
              'pohiougyutyxtrzextycvu'
      ],
      newdataList:[
              'a',
              'black',
              'pink',
              'blue',
              'emo',
              'orange',
              'write',
              'yellow',
              'green',
              'pohiougyutyxtrzextycvu'
      ],
    },
    methods:{
      handleSearch(){
        console.log('搜索的内容是:',this.search)
        var _this = this
          # 较为复杂的写法,后面可以缩微一行
        // this.newdataList = this.dataList.filter(item=>{console.log(this)
                                                     # 判断this.search是否在item中,如果在保留,return true,如果不再返回false
        //   if(item.indexOf(this.search)>=0){
        //   return true
        // }else {
        //   return false
        // }
        // })
      # 简易写法
        this.newdataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
      }
    }
  })
  # 数组过滤内置方法
  // var l = [
  //              'a',
  //             'black',
  //             'pink',
  //             'blue',
  //             'emo',
  //             'orange',
  //             'write',
  //             'yellow',
  //             'green',
  //             'pohiougyutyxtrzextycvu'
  // ]
  # filter数组内置的,需要传一个匿名函数,接受一个参数,会循环的从数组中取出值,传入匿名函数,执行
  # 匿名函数返回true或false,如果返回trur那么该值保留,如果返回false那么丢失
  // l = l.filter(function (item){
  //   console.log('进来一个值:',item)
  //   return false
  // })
  // console.log(l)

  // var s ='black'
  // var a = 'a'
  // console.log(s.indexOf(a)>=0)

  // var f =  (name,age) =>{
  //   console.log('打印了',name)
  // }

  // var f = (name,age) =>{
  //   console.log('打印了',name, age)
  // }

  // var f = function (name){
  //   return name+'nb'
  // }
  // var f = name => name+'nb'

  // var f = function () {
  //   console.log('匿名函数的this',this)
  // }
  // var f1 = () => {
  //   console.log('箭头函数的this',this)
  // }
    
  // var obj = {
  //   f: function (){
  //     console.log('匿名函数的this',this)
  //   },
  //   f1 : () =>{
  //     console.log('箭头函数的this',this)
  //   }
  // }


</script>



</html>

事件修饰符

  • stop 只能处理自己的事件,不向父控件冒泡
  • self 只处理自己的事件,子控件冒泡的时间不处理
  • prevent 阻止a链接的转跳
  • once 该事件只能发生一次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="./JS/vue.js"></script>
</head>
<body>
<div id="app01">
    <h1>事件修饰符</h1>
    <h2>时间冒泡  通过修饰符 stop加在子控件上,阻止事件冒泡</h2>
    <ul @click="handleU1">
        <li @click.stop="handlegirl">美女</li>
        <li @click="handleyangman">帅哥</li>
    </ul>
    <h2>事件冒泡 通过 事件修饰符 self加在父控件上,只处理自己的事件</h2>
    <ul @click.self="handleU2">
        <li @click.stop="handlegirl">美女</li>
        <li @click="handleyangman">帅哥</li>
    </ul>

    <h3>阻止a标签的跳转</h3>
    <a href="https://www.jd.com/" @click.prevent="handleA">点我购物</a>

    <h4>once只执行一次</h4>
    <button @click.once="handleOnce">点我秒杀</button>
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app01',
        data:{},
        methods:{
            handleU1(){
                console.log('ul被点了')
            },
            handlegirl(){
                console.log('美女被点击')
            },
            handleyangman(){
                console.log('帅哥被点了')
            },
            handleA(){
                console.log('A被点了')
            },
            handleOnce(){
                console.log('恭喜你秒杀成功')
            }
        }
    })
</script>
</html>

按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-model="search" placeholder="请输入搜索内容" @keyup.enter="handleUp">


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: ''
        },
        methods: {
            handleUp(event) {
                console.log('回车被按了')
                // if (event.code == 'Enter') {
                //     console.log('回车键被案例', event)
                // }
            }
        }

    })


</script>
</html>

标签:Vue,console,入门,简易,log,key,var,name
From: https://www.cnblogs.com/joseph-bright/p/16826531.html

相关文章

  • Vue
    目录前端发展Vue的使用插值语法指令系统文本指令事件指令属性指令属性条件渲染列表渲染双向数据绑定事件处理事件修饰符按键修饰符前端发展1.前端发展史1.1HTML(5)+c......
  • vue2- style 和class - 条件渲染 - 列表渲染 - v-for 循环,数组,循环字符串,数字,对象 -
    style和class条件渲染列表渲染v-for循环,数组,循环字符串,数字,对象数组的检测与更新双向数据绑定事件处理过滤案例事件修饰符按键修饰符1.style和class<!DOCT......
  • 【2022.10.25】Vue基础学习(2)
    今日详情1.style和class2.条件渲染3.列表渲染3.1v-for循环数组,循环字符串,数字,对象3.2数组的检测与更新4.双向数据绑定5.事件处理5.1过滤案例5.2事件修饰......
  • chrome插件 vue-devtools zip 编译
    背景,工程代码在内网无法联网百度等,需要离线安装该工具开发vuejs工程 一、从有网络的地方拷贝插件xxxxx.crx,觉得这种比较合理注意,网上说的从chrome://extensions/查看......
  • 【2022-10-25】前端Vue框架(二)
    一、Style和class数据绑定语法:属性名=js变量/js语法:class=’js变量、字符串、js数组’class:三目运算符、数组、对象{red:true}:style=’js变量、字符串、js数......
  • vue特殊属性指令,vue条件渲染,vue列表渲染,vue双向数据绑定,vue事件处理
    特殊的属性指令style和class条件渲染列表渲染v-for循环数组,字符串,数字,对象数组的检测与更新双向数据绑定事件处理过滤案例事件修饰符按键修......
  • Vue学习-02
    一、style和class数据的绑定语法:属性名=js变量/js语法  :class=‘js变量、字符串、js数组’class:三目运算符、数组、对象{red:true}  :style=‘js变量、字符串、......
  • 20221024&20221025 图数据库/知识图谱/AI/Neo4j入门
    起源/Outline图数据库GraphDB在计算机科学中,图数据库(英语:graphdatabase,GDB[1])是一个使用图结构进行语义查询的数据库,它使用节点、边和属性来表示和存储数据。该系统......
  • vue 与 脚手架版本
    vue与cli版本怎么选择卸载npmuninstall[<@scope>/]<pkg>[@<version>]...[--save-prod|--save-dev|--save-optional][--no-save]点击查看代码npmuninstallvue......
  • vue3+vite+ts 项目配置 @/路径
    vite.config.ts文件中前置条件下载types/node下面引入的path会用到npminstall@types/node--save-dev原因:path模块是node.js内置的功能,但是node.js本身并不支持ts,......