初识vue

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

王一胜233

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

阅读量191

点赞数

分类专栏： java js 文章标签： vue

本文链接：https://blog.csdn.net/wangyisheng233/article/details/88957110

版权

java 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

vue入门

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

一.什么是vue

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

MVVM模式：

M: Model(模型，数据)
V:View(视图)
VM:视图模型

二.Vue的基本语法

2.1 第一个Vue程序：hello word

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.min.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                message:"hello word"
            }
        })
    </script>
</body>
</html>

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

v-for ：循环

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

div id="app">
       <ul>
           <li v-for="(v,i) in hobby">{{v}}--{{i}}</li>
       </ul>
       <ul>
           <li v-for="(v,k,i) in employee">{{v}}----{{k}}----{{i}}</li>
       </ul>
       <ul>
           <li v-for="v in num1">{{v}}</li>
       </ul>
       <ul>
           <li v-for="v in str">{{v}}</li>
       </ul>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                hobby:["逛街","购物","打游戏","睡觉"],
                employee: {
                    name:"张无忌",
                    age:25,
                    sex:true
                },
                num1:20,
                str:"I love you"
            }
        })
    </script>

v-bind: 绑定属性

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

<div id="app">
        <!--标准写法-->
        <img v-bind:src="src" v-bind:alt="alt" v-bind:width="width">

        <!--简单写法-->
        <img :src="src" :alt="alt" :width="width">

        <!--绑定对象-->
        <img v-bind="img">
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                src :"img/h4.jpg",
                alt:"没有tup",
                width:200,
                img:{
                    src :"img/h4.jpg",
                    alt:"没有tup",
                    width:200
                }
            }
        })
    </script>

v-model: 数组双向绑定(input,select,textarea)

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

<div id="app">
        <!--text绑定-->
        <input type="text" v-model="inputVal"> {{inputVal}}
        <hr/>
        <!--单选绑定-->
        <input name="sex" v-model="sexVal" type="radio" value="true" > 男
        <input name="sex" v-model="sexVal" type="radio" value="false" > 女
        {{sexVal}}
        <hr/>
        <!--下拉-->
        <select v-model="selectVal">
            <option value="lol">英雄联盟</option>
            <option value="wow">魔兽世界</option>
            <option value="pubg">绝地求生</option>
        </select>
        {{selectVal}}
        <hr/>
        <!--多选-->
        <input name="hobby" type="checkbox" value="1" v-model="hobbyVal"> 打游戏
        <input name="hobby" type="checkbox" value="2" v-model="hobbyVal"> 吃饭
        <input name="hobby" type="checkbox" value="3" v-model="hobbyVal"> 睡觉
        <input name="hobby" type="checkbox" value="4" v-model="hobbyVal"> 散步
        {{hobbyVal}}
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                inputVal:"打飞机",
                sexVal:false,
                selectVal:"lol",
                hobbyVal:[1]
            }
        })
    </script>

v-show：显示也隐藏

只是隐藏(display:none)

 <div id="app">
        <span v-show="myshow" >show一下</span>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                myshow:true   // true:显示元素  false:隐藏元素
            }
        })
    </script>

v-if: 判断

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

<div id="app">
        <div v-if="age<20">
            小伙子，还年轻
        </div>
        <div v-else-if="age>20 && age<60 ">
            努力赚钱
        </div>
        <div v-else>
            天伦之乐
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                age:80
            }
        })
    </script>

v-on: 注册事件

 <div id="app">
        <input type="submit" value="提交" @click="say">
        <input type="submit" value="提交" @click="hello('哒哒哒')">
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                message:"hello word"
            },
            methods:{
                say(){
                    alert(0)
                },
                hello(name){
                    alert(0+name)
                }
            }
        })
    </script>

五.VUE组件

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

5.1 全局组件

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

  <div id="app">
        <mydiv></mydiv>
    </div>
    <div id="app2">
        <mydiv></mydiv>
    </div>
    <script>

        Vue.component("mydiv",{
            template:"<h1>今晚打老虎</h1>"
        })

        new Vue({
            el:"#app"
        })
        new Vue({
            el:"#app2"
        })
    </script>

5.2 局部组件

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

<div id="app">
    <mydiv></mydiv>
</div>
<div id="app2">
    <mydiv></mydiv> //无效
</div>
<script>
    new Vue({
        el:"#app",
        components:{
            mydiv:{
                template:"<h1>今晚打老虎</h1>"
            }
        }
    })
    new Vue({
        el:"#app2"
    })
</script>

王一胜233

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识vue

vue入门一.什么是vue二.Vue的基本语法2.1 第一个Vue程序：hello word2.2 el2.3 data2.4 methods三.VUE表达式四.VUE的指令五.VUE组件5.1 全局组件5.2 局部组件一.什么是vue渐进式的Javascript框架 MVVM(Model,View,ViewModel)模式MVVM模式：M: Model(模型，数据)V:View(...
复制链接

扫一扫

专栏目录