Vue入门

两仪式quq

已于 2024-02-29 00:21:10 修改

阅读量423

点赞数 4

文章标签： vue.js

于 2024-02-27 16:36:44 首次发布

本文链接：https://blog.csdn.net/abfwaaf/article/details/136323447

版权

1.概念

Vue是一款前端渐进式框架，可以提高前端开发效率

2.特点

Vue遵循MVVM(Model View ViewModel)模式，实现视图和模型的双向绑定
MVVM是基于后端的MVC(Model View Controller)模式的改进而来，相较于MVC模式，它最大的特点就是实现了视图和模型的双向绑定

3.入门程序

3.1.引入Vue的CDN

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

3.2.创建html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--View-->
<div id="app">
  {{message}}
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!--Model-->
<script>
  var vm = new Vue({
    el:"#app",
    data:{
      message:"hello vue"
    }
  });
</script>

</body>
</html>

3.3.运行

4.ViewModel

看到这，发现MVVM的Model和View都有了，那么ViewModel在哪呢？

打开网页的控制台，在控制台上写前端代码：
vm.message="今天天气真好"
vm是我们自己创建的对象，message是Vue自己封装的属性，我们在网页上修改message里封装的数据(Model)，不用刷新网页，视图(View)就会自己改变，这就是视图和模型的双向绑定(ViewModel)

5.Vue基本语法

5.1.v-bind

<!--View-->
<div id="app">
  <span v-bind:title="message">鼠标悬停几秒查看绑定元素</span>
</div>

上面的v-bind被称为指令，指令带有前缀v-，表示它们是Vue提供的特殊特性

v-bind和入门程序里的{{message}}具有一样的作用

5.2.v-if和v-else

<div id="app">
  <h1 v-if="ok">Yes</h1>
  <h1 v-else>No</h1>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      ok: true
    }
  });
</script>

v-if和v-else和平时使用的if-else判断语句是一样的
上面的程序表示，当ok的值是true时，就显示Yes，当它的值是false时就显示No
同样的，可以使用双向数据绑定，在网页控制台上修改数据，从而修改视图

5.3.v-for

<div id="app">
  <h1 v-for="result in items">{{result.message}}</h1>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      items: [
        {message: "周一"},
        {message: "周二"},
        {message: "周三"}
      ]
    }
  });
</script>

v-for和平时的for循环遍历没有区别

注意下语法，"result in items" 表示从items数组中遍历出来的元素放在result中

还可以获取数组的下标，如下：

<div id="app">
  <h1 v-for="(result,index) in items">{{result.message}}---{{index}}</h1>
</div>

结果：

6.Vue绑定事件

Vue中有一个methods属性，js方法一般都放在methods中
v-on属性可以用来绑定事件，如下：

<div id="app">
    <button v-on:click="sayHi">点我</button>
</div>


<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "你好"
        },
        methods: {
            sayHi: function (){
                alert(this.message);
            }
        }
    });
</script>

上面的例子中，v-on绑定了一个click点击事件

7.Vue实现双向绑定

在上面的入门程序中，我们通过双向绑定实现了修改Model之后View也随之改变，接下来实现修改View之后Model改变
v-model可以在表单<input>、<textarea>及<select>元素上创建双向绑定

input标签：

<!--让input标签绑定某一个data，在input标签里输入什么，就会让这个data变成什么-->
<div id="app">
    文本框：<input type="text" v-model="message"/>{{message}}
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    });
</script>

select标签：

<!--让input标签绑定某一个data，在input标签里输入什么，就会让这个data变成什么-->
<div id="app">
    <select v-model="message">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>
        你选中了：{{message}}
    </p>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    });
</script>

两仪式quq

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Vue入门

注意下语法，"result in items" 表示从items数组中遍历出来的元素放在result中。看到这，发现MVVM的Model和View都有了，那么ViewModel在哪呢？上面的v-bind被称为指令，指令带有前缀v-，表示它们是Vue提供的特殊特性。v-bind和入门程序里的{{message}}具有一样的作用。v-for和平时的for循环遍历没有区别。vm.message="今天天气真好"
复制链接

扫一扫