vue的基础练习

2021/7/11 23:15:52

编程Tag： vue 基础 console bind name log age 练习 CASS

本文主要是介绍vue的基础练习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

@VUE的使用

vue

// A code block
var foo = 'bar';
使用插值表达式获取变量 或者使用v-text、v-html 区别后者会覆盖标签中原有的值 前者会出现插值闪烁
使用v-show时，可以使用 true/false控制，当点击按钮切换显示时需要定义变量，通过事件动态获取值，使用函数
v-bind添加css时v-bind:class='变量名'或v-bind:class='showcss?'aa':'''ture添加样式false移出样式或v-bind:class="{aa:cass}"

// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>回顾vue</title>
    <!--this 指的是当前的vue实例-->
    <style>
        .aa{
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <!--插值表达式-->
   <span>{{msg}}</span><br>
    <span>{{age}}</span><br>
    <span>{{arr[0]}}</span><br>
    <span>{{user}}</span><br>
    <span>{{user.name}}</span><br>
    <hr>
    <span v-text="msg">将标签原有的值覆盖</span><br>
    <span v-text="message"></span><br>
    <span v-html="message"></span><br>
    <!--
    事件的三要素 ： 事件源 html 标签是谁 事件 特定动作 点击 双击 事件的处理程序 通常使用函数
    事件的定义 ： v-on 指令： 用来给标签绑定事件 v-on:事件名=""
    事件的参数传递 v-on 简化 v-on:click ==>  @click='时间函数'-->
    <input type="button" value="点我出发事件" @click="alert('name',12,'remark')">
    <hr>
    <!--v-show 作用：用来控制页面中的标签元素是否展示  底层通过控制元素的dispaly属性来进行标签的显示和不显示控制-->
    <span v-show="false">欢迎来到威海</span>
    <span v-show="isshow">好客山东</span>
    <input type="button" value="点我显示隐藏" @click="chagneshow">
    <hr>
    <!--v-if 作用 用来控制页面中的标签元素是否展示 底层通过对dom树节点进行添加和删除来控制展示和隐藏-->
    <h1 v-if="false">你好，哈哈哈</h1>
    <!--v-bind 作用 用来给页面元素绑定响应的属性-->
    <!--<img width="300" title="招财猫" src="https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg">-->
    <img v-bind:src="src" v-bind:title="title" width="300" v-bind:class="{aa:cass}">
    <input type="button" value="点击添加移出样式" @click="changeclass">
    <input type="button" value="点击改变表头样式" @click="changetitle('xxx')">
    <input type="button" value="点击改变图片" @click="changeimg('https://img0.baidu.com/it/u=3880341262,3308316348&fm=26&fmt=auto&gp=0.jpg')">

</div>
<!--v-test v-html 指令相当与js innertest innertest
 注意 ：指令中不用添加插值表达式 直接书写变量名-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app =new Vue({
        el:"#app",
        data:{
            message:"<a href='#'>哈哈哈</a>",
            msg:"威海欢迎你",
            age:23,
            arr:["北京","上海","广州"],
            user:{name:"zhangsan",age:22,remark:"爱唱歌"},
            isshow:true,//通过事件动态获取值
            title:"招财猫",
            src:"https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg",
            cass:true
        },
        methods:{//用来定义函数
            alert(name,age,remark){
                alert("哈哈哈");
                console.log(name);
                console.log(age);
                console.log(remark);
                console.log(this);
                console.log(this.message);
                alert(this.message);
            },
            chagneshow(){
                this.isshow=!this.isshow;
            },
            changeclass(){
                this.cass=!this.cass;
            },
            changetitle(value){
                this.title=value;
            },
            changeimg(img){
                this.src=img;
            }
        }
    })
</script>
</body>
</html>

这篇关于vue的基础练习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

vue的基础练习

vue

相关编程文章