VUE基本语法

最新推荐文章于 2023-07-04 09:47:43 发布

CSDN蔡茂

最新推荐文章于 2023-07-04 09:47:43 发布

阅读量800

点赞数

文章标签： VUE基本语法

本文链接：https://blog.csdn.net/qq_37937144/article/details/90340950

版权

文章目录

一.什么是VUE
二.VUE基本语法
三.VUE表达式
四.VUE的指令
五.VUE组件
- 5.1 全局组件
- 5.2 局部组件

一.什么是VUE

渐进式的Javascript框架
MVVM(Model,View,ViewModel)模式

二.VUE基本语法

2.1 Vue的基本使用

引用vue.js
准备要挂载的标签
创建vue对象，进行挂载

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js-->
    <script src="js/vuejs/vue.min.js"></script>
</head>
<body>

<div id="app">
    {{message}}
</div>

<script>
    new Vue({
        el:"#app", //挂载
        data:{
            message:"hello,Vue!"
        },
        methods:{
            
        }
    });
</script>
</body>

2.2 el

指定相应的挂载对象
可以使用id,class,标签(建议使用id挂载)
挂载后代表这个标签被vue接管

2.3 data

vue对象准备的数据
这个数据发生变化后,用到它的view部分值也改变

2.4 methods

vue中对象的方法
在html中 {{方法()}}
在js vue对象.方法()
方法中的this就是指这个vue对象

三.VUE表达式

做四则运算(+,-,*,/)
三目运算符
可以调用字符串,对象,数组的方法(在{{}}直接写js代码的感觉)

注意:对象中也可以有方法,并且可以调用(如非必要不建议这样写)

四.VUE的指令

指令就是 v-属性

v-text,v-html :展示相应的数据
v-for ：循环
v-bind: 绑定属性
v-model: 数组双向绑定(input,select,textarea)
v-show：显示也隐藏
v-if: 判断
v-on: 注册事件

v-text,v-html

v-html会读到html标签(会显示标签的效果)
v-text会把标签当做字符串显示
注意:标签中如果加了它们，里面的值就会被替换

v-for

可以循环数组,对象，数字与字符串

<div id="app">
    直接拿到数组中的值
    <div v-for="v in hobbys">{{v}}</div>
     直接拿到数组中的值与索引
    <div v-for="(v,i) in hobbys">{{v}}</div>
     直接拿到对象的属性值
    <div v-for="v in user">{{v}}</div>
    直接拿到对象的属性值，属性名,索引
    <div v-for="(v,k,i) in user">{{v}}</div>
</div>

new Vue({
    el:"#app",
    data:{
        hobbys:["空调","吃饭","睡觉","打豆豆"],
        user:{
            id:1,
            username:"隔壁王哥",
            age:45,
            sex:true
        },
        num:10,
        name:"itsource"
    }
})

v-bind: 绑定属性

可以让属性在vue对象中取值

<div id="app">
    标签形式
    <img v-bind:src="src" />
    简写形式
    <img :src="src" />
    直接绑定所有属性
     <img v-bind="attr" />
</div>

new Vue({
    el:"#app",
    data:{
        src:"1.jpg",
        attr:{
            src:"1.jpg",
            width:40,
            height:40
        }
    }
})

v-model: 数组双向绑定

只能作用于(input,select,textarea)

<div id="app">
    <input type="text" v-model="textVal">
    {{textVal}}
</div>

new Vue({
    el:"#app",
    data:{
        textVal:"xxxx"
    }
})

v-show:展示与隐藏

只是隐藏(display:none)

<div id="app">
  <div v-show="true">显示我吧</div>
  <div v-show="show">显示我吧</div>
</div>

new Vue({
    el:"#app",
    data:{
        show:true
    }
})

v-if:判断

v-if,v-else-if,v-else(不显示dom元素就删除)

<div id="app">
 <div v-if="score>=90">你很棒</div>
 <div v-else-if="score>=60 && score<90">你努力</div>
 <div v-else>你不行</div>
</div>

new Vue({
    el:"#app",
    data:{
        score:80
    }
})

v-on:注册事件

<div id="app">
 标准写法
 <button v-on:click="alert(0)"></button>
 简写形式
 <button @click="alert(1)"></button>
 调用方法(加不加括号都可以实现)
 <button @click="say"></button>
 <button @click="say()"></button>
</div>

new Vue({
    el:"#app",
    data:{
        score:80
    },
    methods:{
        say(){}
    }
})

五.VUE组件

先创建组件后挂载
template(模块)中，有且只有一个根
取名用小写(如果是驼峰 myTag -> my-tag)

5.1 全局组件

所有被挂载的位置都可以使用

 Vue.component("mytag",{
        template:"<div>我有100句代码!</div>"
    });

5.2 局部组件

只能在当前被挂载的元素中使用

 new Vue({
        el:"#app",
        //创建局部的组件
        components:{
            //组件的名称
            "mytag":{
             template:"<div>我是一个局部的组件！</div>"
            }
        }
    })

CSDN蔡茂

关注

0
点赞
踩
4

收藏

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

文章目录一.什么是VUE二.VUE基本语法2.1 Vue的基本使用2.2 el2.3 data2.4 methods三.VUE表达式四.VUE的指令v-text,v-htmlv-forv-bind: 绑定属性v-model: 数组双向绑定v-show:展示与隐藏v-if:判断v-on:注册事件五.VUE组件5.1 全局组件5.2 局部组件一.什么是VUE渐进式的Javascript框架MV...
复制链接

扫一扫