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,console,log,bind,age,练习,基础,cass,name 来源： https://blog.csdn.net/weixin_51717611/article/details/118660729