vue下拉框动态数据绑定_vue开端 -- 做个工匠 - 1 数据绑定以及指令-CSDN博客

本文链接：https://blog.csdn.net/weixin_33800724/article/details/113492749

本文是Vue.js的基础教程，介绍了Vue的安装、数据绑定、指令如v-html、v-text、v-pre、v-bind、v-model、v-if、v-show、v-for等，并通过实例演示了它们的使用方法，适合初学者入门。

摘要由CSDN通过智能技术生成

嗨朋友！感谢光临我的博客还没上岸的我还在努力之中，本文中理解有错的时候还请您指点本人也很喜欢爬虫欢迎来到本人的公众号一起交流公众号：Linux下撸python 能得指点是晚辈荣幸

絮叨一下
简单介绍
安装方法
- script
- npm下载
创建一个实例
- 挂载点el
- 存放数据data
- 函数methods
第一个hello vue
指令v-xx
- v-html
- v-text
- v-pre填充原始信息
- v-bind 动态数据绑定
- v-model 双向数据绑定
- v-if 是否渲染
- v-show 是否隐藏
- v-if vs v-show
- v-for循环
写给看到最后的你

絮叨一下

嗨你好突然就很喜欢工匠这个词，但似乎缺少了一些工匠的心，努力做一个工匠开始学习vue这个主流框架，希望我的这篇文章对屏幕前的你有所启发

简单介绍

官网：vue官网

什么是vue.js 其后缀是.js 也就是可以当成是一个js库

其数据是响应的数据的变化直接改变页面的内容

并不用去关心dom 而是关注其数据

如果你是一名萌新可以会感觉我英语不好文档翻译不过来不过学习vue是完全不用考虑这个问题的毕竟尤大大是中国的大大来吧废话不多说开始吧当然啦一下文章均以 vue2系列做为教程

安装方法

script

可以使用script直接引入使用，当然啦这种方法优点缺点也是很明显的不占空间但是需要记载时间网络差体验不好

可以使用最新版 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
当然也可以使用稳定版本 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

npm下载

官网这样解释到

在用 Vue 构建大型应用时推荐使用 NPM 安装。 NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

下载最新 npm install vue
下载稳定版本 npm install vue --save

这样就会下载到本地

引入的话就是 <script src="/node_modules/vue/dist/vue.js"></script> 作为初学者还是不要使用压缩版本也就是 vue.min.js

创建一个实例

new Vue({
    // 挂载点
    el:"css选择器",
    // 数据
    data:{
        属性名:属性值,
    }，
    // 函数
    methods:{
        fn(){
            console.log("这个就是点击触发的函数")
        }
    }

挂载点el

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
挂载点根据css选择器进行选择挂载的位置当有多个挂载点的时候只会选择第一个挂载点
不可以将vue挂载在body以及html上
在实例挂载之后，元素可以用 vm.$el 访问。

存放数据data

data:{
        属性名:属性值,
    }

函数methods

其是一个对象用到的函数都需要放在这个对象中

第一个hello vue

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

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

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                messige: "hello vue",
            },            
        });
    </script>
</body>

</html>