Vue入门

最新推荐文章于 2024-06-17 20:32:47 发布

c7ay.

最新推荐文章于 2024-06-17 20:32:47 发布

阅读量448

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端 web开发前端开发

本文链接：https://blog.csdn.net/qq_45924653/article/details/125329787

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue
Vue基本语法
Vue绑定事件
Vue双向绑定

Vue

Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（vue-router，vue-resource，vuex）或既有项目整合。
第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div id="app">
    {{message}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

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

在这里插入图片描述

Vue基本语法

v-bind

Vue中数据和DOM建立连接，所有东西都是响应式的。在控制台操作对象属性，界面可以实时更新。

<div id="app">
    <span v-bind:title="message">
        鼠标悬停
    </span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

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

在这里插入图片描述
控制台中修改message的值，绑定了title属性的html也进行了更新

在这里插入图片描述

v-if

vue模版中的if

<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.5.21/dist/vue.min.js"></script>

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

在这里插入图片描述
同理更改ok为false前端也是实时更新

在这里插入图片描述
v-else-if写法相同

v-for

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
        items: [
            {message: "张三"},
            {message: "法外狂徒"}
        ]
    }
  });

写法类似于python

在这里插入图片描述
还有一个常用的index属性

<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}--{{index}}
    </li>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
        items: [
            {message: "张三"},
            {message: "法外狂徒"}
        ]
    }
  });
</script>

在这里插入图片描述

Vue绑定事件

v-on:事件=“方法”
事件有Vue的事件和前端页面本身的事件。这里click是vue的事件，可以绑定到Vue中的methods中的事件方法

<div id="app">
   <button v-on:click="sayHi">click me</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

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

在这里插入图片描述

Vue双向绑定

什么是双向数据绑定
Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当
视图发生变化的时候，数据也会跟着同步变化。
值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数
据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项
的，这时就会和双向数据绑定有冲突。
vue中使用v-model指令在表单、和元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

<div id="app">
   输入的文本:<input type="text" v-model="message">{{message}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

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

在这里插入图片描述

<div id="app">
   <select v-model="selected">
    <option>A</option>
    <option>B</option>
    <option>C</option>
   </select>
   <span>value:{{selected}}</span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

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