VUE_day1
1 第一个案例
<div id="app">
{
{msg}} {
{username}}{
{pwd}}
<br>
<h1>
{
{username}}
</h1>
<span>{
{msg}}</span>
<span>
{
{msg+"!"}}
{
{msg.toUpperCase()}}
</span>
<h3>{
{msg}}</h3>
<h3>名称：{
{user.name}},信息{
{user.msg}}</h3>
<h2>{
{age}}</h2>
<h3>{
{lists[0]}}----{
{lists[1]}}----{
{lists[2]}}</h3>
<h3>{
{users[0].name}}</h3>
</div>
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",//element 用来给Vue实例定义一个作用范围
data:{
msg:"你好，期待你的加入!",
username:"hello,Vue1",
pwd:"12345",
user:{name:"baizhi",msg:"baizhihuanyingnin"},
age:23,
lists:["河南","天津","深圳"],
users:[{name:"joe", age:34 },{name:"Chenal", age:23 },{name:"Jeny", age:78 }]
},//用来Vue实例定义一些相关的数据
});
</script>
# 总结
1： vue实例（对象）中的el属性：代表了Vue作用范围，日后在Vue的作用范围内，都可以使用Vue的语法
2： vue实例（对象）中的data属性：用来给Vue实例绑定相关数据，绑定的数据可以通过{
{变量名}}的形式在Vue的作用范围内使用
3： 在使用{
{}}进行获取data中数时，可以在{
{}}中书写表达式，运算符，相关函数调用，逻辑运算
4： el属性中可以书写任意的CSS选择器【JQuery选择器】，但是在Vue开发中，推荐使用id选择器2 v-text和v-html
v-text：用于取data中的数据将数据以文本的形式渲染在页面指定标签内部
v-html：用来获取data中的数据将数据中含有的html标签先解析再渲染到指定标签的内部
<div id="app">
<span>{
{message}}</span>
<h4 v-text="message"></h4>
<h4 v-html="msg"></h4>
</div>
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",//element 用来给Vue实例定义一个作用范围
data:{
message:"您的脑袋被僵尸吃掉了",
msg:"<a href='http://www.baidu.com'>Baidu</a>"
},//用来Vue实例定义一些相关的数据
});
</script>v-text和{ {}}的区别：
1.{ {}}(插值表达式)和v-text获取数据的区别在于：使用v-text的取值会将标签中原有的数据覆盖；使用插值表达式不会覆盖标签原有数据。
2.使用v-text可以避免在网络比较差的情况下，出现插值闪烁
3.Vue中事件绑定（v-on）
1.绑定事件的语法
<div id="app">
<h2 v-text="message"></h2>
<h2 v-text="'age:'+age"></h2>
<input type="button" value="修改年龄" v-on:click="changeAge">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",//element 用来给Vue实例定义一个作用范围
data:{
message:"Welcome you !",
age:23
},//用来Vue实例定义一些相关的数据
methods:{//methods 用来定义vue中的事件
changeAge:function(){
//在函数中获取vue实例中data的数据
//在事件函数中，this就是vue实例
this.age+=1;
}
}
});
</script> # 总结：
事件：发生特定的动作
事件源：发生事件的dom元素
监听器：发生特定动作后的事件处理程序
1.在Vue中绑定事件，是通过v-on指令完成的 v-on:事件名="函数名" eg：v-on:click="changeAge"
2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名
3.在Vue中事件的函数，统一定义在Vue实例的methods属性中
4.在vue定义的事件中this指的就是当前的vue实例，日后可以在事件中，通过使用this获取vue实例中的相关数据2.Vue绑定事件的简化语法@
@ 替代v-on
<div id="app">
<h2>{
{age}}</h2>
<input type="button" value="通过v-on绑定事件，年龄+1" v-on:click="changeAge">
<input type="button" value="通过@绑定事件，年龄每次-1" @click="editage">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",//element
data:{
age:23,
},//用来Vue实例定义一些相关的数据
methods:{
changeAge:function (){
this.age++;
},
editage:function (){
this.age--;
},
},//定义事件处理函数
});
</script> # 总结：
1.日后vue中绑定事件可以使用@符号形式，简化v-on的事件绑定3.Vue事件函数的两种写法
<div id="app">
<span>{
{count}}</span>
<input type="button" value="change_count" @click="changeCount">
</div>
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",//element 用来给Vue实例定义一个作用范围
data:{
count:1
},//用来Vue实例定义一些相关的数据
methods:{
/*changeCount:function (){
this.count++;
},
*/
changeCount(){
this.count++;
}
},//定义事件处理函数
});
</script># 总结：
1.在Vue中事件定义存在两种写法：
①函数名：function(){} --推荐
②函数名(){}4.Vue事件参数传递
<div id="app">
<span>{
{count}}</span>
<input type="button" value="改变值" @click="change(34)">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",//element 用来给Vue实例定义一个作用范围
data:{
count:0,
},//用来Vue实例定义一些相关的数据
methods:{
change(count){
this.count=count;
}
},//定义事件处理函数
});
</script># 总结
1.在使用事件时，可以直接在事件调用处给事件进行参数传递，在事件定义处可以通过定义对应变量接受传递的参数4 v-show v-if v-bind
4.1 v-show
v-show：用来控制页面中的某个元素是否展示，底层控制的时标签的display属性
<div id="app">
<!--v-show 用来控制标签展示还是显示-->
<h2 v-show="show">张小天才的一天！</h2>
<input type="button" value="显示|不显示" @click="showmsg">
</div>
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",//element 用来给Vue实例定义一个作用范围
data:{
show:true,
},//用来Vue实例定义一些相关的数据
methods:{
showmsg(){
this.show=!this.show;
}
},//定义事件处理函数
});
</script># 总结
1.在使用v-show时，可以直接书写boolean值控制元素展示，也可以通过变量控制元素展示和隐藏
2.在v-show中可以通过boolean表达式控制标签的展示和隐藏4.2 v-if
v-if:用来控制页面元素是否展示 底层控制是DOM元素 操作DOM
4.3 v-bind
v-bind：用来给标签绑定相应属性，从而通过vue动态修改标签属性
<head>
<meta charset="UTF-8">
<title>VUE</title>
<style >
.btn{
color:red;
background: aquamarine;
border: blue 2px solid;
}
.image{
border: brown 2px solid;
}
</style>
</head>
<body>
<div id="app">
<h1>count={
{count}}</h1>
" v-bind:class="css" value="add" @click="change">
<input type="button" class="btn" v-if="show" value="sub" @click="changesub">
<input type="button" value="点击隐藏|显示减法按钮" @click="hide">
>
="button" v-bind:class="show_css?'btn':''" value="hh">
<input type="button" value="CSS显示" @click="showCss">
><br>
img v-bind:title="title" v-bind:class="{image:show_CSS}" v-bind:src="src">
<input value="动态绑定" type="button" @click="Bangding">
</div>
<!-- 引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
count:1,
show:false,
css:"btn",
show_css:false,
title:"Baidu搜索",
show_CSS:true,
src:"https://tse4-mm.cn.bing.net/th/id/OIP.WeK7XSDLa3Rbiq7pSwRXjwHaCy?pid=Api&rs=1",
},
methods:{
change(){
this.count++;
},
changesub(){
this.count--;
},
hide(){
this.show=!this.show;
},
showCss(){
this.show_css=!this.show_css;
},
Bangding(){show_CSS=!this.show_CSS;}
});
</script>
</body>5.4 v-bind简化
vue为了方便我们日常使用绑定标签的属性提供了对属性绑定的简化写法
v-bind:属性名简化后为:属性名