vue基础语法

最新推荐文章于 2022-03-10 12:59:49 发布

饿美了学java

最新推荐文章于 2022-03-10 12:59:49 发布

阅读量337

点赞数

分类专栏：前端学习笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_36883768/article/details/108965750

版权

前端学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue基础语法

vue引言

vue入门

v-text和v-html

====================================================

vue引言

vue 渐进式javascript框架：让我们通过操作很少得Dom元素，就很容易完成数据和视图的绑定双向绑定 mvvm

vue入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">{{masg}}
        <br>
        <span>
        {{masg}}
            <h1>{{masg}}</h1>
        </span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//element
        data:{
            masg:"你好，杨房东第一天打卡2020 10 08"
        }
    });
</script>
</html>

总结：
1.vue 实例（对象）中的el属性：代表vue对象的作用范围在作用范围内都i可以使用data中属性
2.data属性：可以用{{}} 取出
3.在使用{{}}获取data数据时书写表达式，运算符调用相关方法和逻辑
4.el属性：推荐使用id选择器

v-text和v-html

v-text：获取data中数据以文本形式渲染到标签内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app" class="aa">
       <span>{{ msg }}}</span>
        <span v-text="msg"></span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
       el:"#app",
       data:{
           msg:"hellow yfd",
       }
    });
</script>
</html>

总结：
1.v-text 覆盖原有标签内的值
2.v-text避免网络环境差是出现插值闪烁

v-html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app" class="aa">
       <span>{{ msg }}</span>
        <span v-html="msg"></span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
       el:"#app",
       data:{
           msg:"<a href='01.vue.html'>yyyy</a>",
       }
    });
</script>
</html>

v-on 事件的使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app" class="aa">
       <span>{{ msg }}</span>
       <h2>{{age}}</h2>

        <input type="button" value="改变年龄" v-on:click="changeage">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
       el:"#app",
       data:{
           msg:"yfd hellow",
           age:"20"
       },
        methods:{ //用来定义vue中的事件
           changeage : function (){
               alert("点击触发");
           }
        }
    });
</script>
</html>

总结：
事件三要素：事件源：发生事件的dom元素事件：发生的动作单击监听器：js函数
1.v-on:事件名
2.v-on:click=“changeage” 函数名
3. methods 事件都定义在这个属性下
4. this 就是当前的vue实例可在函数中使用this取其他属性的值

事件简化语法和参数传递

函数名（）{}

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app" class="aa">
       <h2>{{age}}</h2>
        <input type="button" value="改变年龄" @click="changeage">
        <h2>{{count}}</h2>
        <input type="button" value="改变" @click="changecount(23,'小黑')">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
       el:"#app",
       data:{
           msg:"yfd hellow",
           age:20,
           count:1
       },
        methods:{ //用来定义vue中的事件
           changeage : function (){
               //在函数中获取vue实例中的数据
               //this.age = this.age+1;
               //alert("点击触发");
               this.age--;
           },
            changecount(count,name){
               alert(name);
               this.count = count;
            }
        }
    });
</script>
</html>

v-show

v-show：用来控制页面中某个标签元素是否展示，底层通过控制元素的 display 属性来进行标签的显示和不显示控制。

在 v-show 中可以直接书写 boolean 值控制元素展示
在 v-show 中可以通过 变量 控制标签展示和隐藏。
在 v-show 中可以通过 boolean表达式 控制标签的展示和隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <div id="app" v-show="true">{{masg}}
     <!-- 通过boolean来控制是否展示-->
     <h2 v-show="show">隐藏内容</h2>
     <!-- 通过变量来控制-->
     <input type="button" value="展示or隐藏标签" @click="showmsg">
     <!--利用表达式来控制-->
     <h2 v-show="age>=30" >隐藏内容2</h2>
     <input type="button" value="age>30展示"  @click="ageUp30">
 </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
     el:"#app",//element
     data:{
         show:false,
         masg:"22222",
         age:27
     },
     methods:{
         showmsg(){
             this.show = !this.show;
         },
         ageUp30(){
             this.age++;
             console.log(this.age);
         }
     }
 });
</script>
</html>

饿美了学java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础语法

vue实战vue引言vue入门v-text和v-html====================================================vue引言vue 渐进式javascript框架：让我们通过操作很少得Dom元素，就很容易完成数据和视图的绑定双向绑定 mvvmvue入门<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt
复制链接

扫一扫