Vue架构的认识 | 易学教程

Vue
Vue是一款开源的JavaScript MVVM/MVC 框架。
MVVM：Model View ViewModel，ViewModel自己搞了一个Dom监听器，还有一个数据绑定
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：指定相应的挂载对象，可以用id、class、标签（建议使用id挂载）
    //挂载以后就代表这个标签被Vue接管了
        el:"#app", //挂载
        //data，是Vue对象准备的数据，这个数据发生变化以后，用到他的view部分的值也会发生改变
        data:{
            message:"hello,Vue!"
        },
       //methods：Vue中对象的方法，方法里面的this就是指这个Vue对象
        methods:{
            
        }
    });
</script>
</body>

Vue简单的表达式
表达式中可以写加减乘除，但是如果有字符串，加法会拼接字符串，其他的算法正常运算。

三目运算

字符串操作
如果是个字符串，js里面的所有方法都可以调用。

对象操作，可以拿属性，也可以操作方法：
当key和value一样的时候，就会自动调用

数组操作

Vue指令
什么是指令？
Vue指定的一些特殊的属性。
v-text：主要使用于展示一个标签里面的数据，标签中原来的数据就会被覆盖。
v-html：主要用于显示一个标签里面的数据，标签原来的数据就会被覆盖。
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-show：true：显示；false：隐藏，只是看不见，其实还是存在的。
v-if：判断

<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-bind：绑定，如果使用的时候报错，Alt+enter，选第二个。
bind：在标签内部的属性，如果要拿到，就要绑定。(绑定属性)
标准写法：v-bind：src=”src”->为标签中的src属性绑定值。
简写形式：

<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-on：事件的绑定
v-on：事件类型=“方法名()”，可以不加方法名的括号（点击事件还是什么事件）
标准形式：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(){}
    }
})

来源：CSDN

作者：九处

链接：https://blog.csdn.net/wjc78242663/article/details/103749383

标签

vue

src