Vue.js教程(一)_vue.js文件 csdn-程序员宅基地

技术标签: 前端  vue.js  

目录

什么是 Vue?

环境搭建

1:创建Vue项目

2:安装浏览器插件

编写第一个Vue程序 Hello world

Vue中的模板语法

1:插值语法

2:指令语法

Vue双向数据绑定

1:单向数据绑定

2:双向数据绑定


vue.js官网:https://cn.vuejs.org

什么是 Vue?

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

环境搭建

1:创建Vue项目

从官网下载 vue.js 文件

创建一个index.html文件,引入下载好的vue.js文件

2:安装浏览器插件

下载add-remote-devtools分支上的源码压缩包

下载完成后,解压压缩包源码,使用 npm install 安装依赖,然后使用 npm run build 打包

 打包完成之后打开谷歌浏览器,进入谷歌浏览器扩展程序,如下图

浏览器vue插件安装完成

然后打开vue程序页面,F12就可以看到刚安装好的vue插件


编写第一个Vue程序 Hello world

<script src="../vue.js"></script>
<body>
    <div id="app">{
   { message }}</div>       <!-- 容器 -->
    <script>
        const app = new Vue({               // 创建vue对象实例
            el: '#app',                     // 使用固定的 el 属性指定当前的vue实例为哪个容器使用,值为css选择器字符串
            // template: `<h1>{
   {message}}</h1>`,    // 不使用el的话也可以使用template模板,注意模板中不能同时存在多个根节点
            data: {                         // 使用固定的 data 属性存储数据给 el 指定的容器使用
                message: "hello world"      // 数据变量,容器中 使用 {
   { }} 语法渲染数据
            }
        })
    </script>
</body>

  • 一个vue实例只能对应一个html标签容器
  • { {}} 语法可以读取到在data中的所有属性
  • data中的数据发生变化,那么在容器用到的数据会自动更新

Vue中的模板语法

1:插值语法

        特点:用在html标签体内

        写法:{ { xxx }}        // xxx是js表达式,可以拿到data中的所有属性

2:指令语法

        特点:用在标签解析上(标签属性、标签体内容、绑定事件等),只要用上指令语法那么数据值就可以在data中赋值

        写法:v-xxx

        // 解析标签属性:v-bind

        v-bind:href = 'url'            // url是data中的自定义属性

        :href='url'                        // 简写模式

        举例(动态渲染a标签的跳转路径):

<script src="../vue.js"></script>
<body>
    <div id="app">
        <a v-bind:href="url">百度一下</a>
    </div>
    <script>
        const app = new Vue({               
            el: '#app',                     
            data: {                         
                url: "https://www.baidu.com"      
            }
        })
    </script>
</body>

Vue双向数据绑定

1:单向数据绑定

        特点:只能从data流向页面

<script src="../vue.js"></script>
<body>
    <div id="app">
        <!-- 
            1:data数据改变后,html标签中的数据也会改变 
            2:input中的数据在页面中改变后,data数据不会改变
        -->
        <input type="text" v-bind:value="name" />
    </div>
    <script>
        const app = new Vue({               
            el: '#app',                     
            data: {                         
                name: "单向数据绑定"            
            }
        })
    </script>
</body>

2:双向数据绑定

        特点:不仅可以从data流向⻚⾯,也能从⻚⾯表单元素(输⼊元素)流向data

        实现:使用 v-model 指令,只能用在能输入的标签上

                <input type="text" v-model:value="name" />

                <input type="text" v-model="name" />        // 简写

                <input type="text" v-model.number="name" />        // 表示只能输入数字类型

        举例:

<script src="../vue.js"></script>
<body>
    <div id="app">
        <!-- 
            1:data数据改变后,html标签中的数据也会改变 
            2:input中的数据在页面中改变后,data数据也会改变
        -->
        <input type="text" v-model:value="name" />
    </div>
    <script>
        const app = new Vue({               
            el: '#app',                     
            data: {                         
                name: "双向数据绑定"            
            }
        })
    </script>
</body>

        原理:vue的双向数据绑定使用的MVVM模型

  • M:Model(模型) 对应data的数据
  • V:View(视图) 模板==>页面
  • VM:ViewModel(视图模型) Vue实例对象

        ViewModel 包含 DOM Listeners 和 Data Bindings。Data Bindings 用于将数据绑定到 View 上显示,DOM Listeners 用于监听操作

MVVM

  • 从 Model 到 View 的映射,也就是 Data Bindings 。这样可以大量省略我们手动 update View 的代码和时间
  • 从 View 到 Model 的事件监听,也就是 DOM Listeners 。这样我们的 Model 就会随着 View 触发事件而改变

Vue中的MVVM

  • data中所有的属性、computed的计算属性、methods中的方法等,最后都出现在了vue实例vm身上
  • vue实例vm身上所有的属性 及 Vue原型上所有属性,在Vue模板{ {}}中都可以直接使用

                

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/a1053765496/article/details/126736843

智能推荐

Eclipse中项目Src看不到.Java文件_eclipse导入的项目src下没java-程序员宅基地

文章浏览阅读5.2k次。Eclipse中项目Src看不到.Java文件需要从Java切换到java EE 工作空间_eclipse导入的项目src下没java

Linux C函数之文件及目录函数(全)_c语言 getwd-程序员宅基地

文章浏览阅读677次。转载地址:http://blog.sina.com.cn/s/blog_695e489c01013ldd.html【转】Linux C函数之文件及目录函数(全)(2012-03-30 17:17:37)转载▼标签:杂谈分类: c语言学习chdir, chmod, chown, chroot_c语言 getwd

ie6,ie7,ie8 css bug兼容解决记录_style clor #fff-程序员宅基地

文章浏览阅读769次。断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法!1:li边距“无故”增加任何事情都是有原因的,li边距也不例外。先描述_style clor #fff

HDMI信号电平波形_hdmi信号波形-程序员宅基地

文章浏览阅读9.4k次,点赞6次,收藏39次。HDMI1.4 信号解析说明1、HDMI1.4接口相关引脚说明如下图所示,3组数据差分信号,1组时钟差分信号,I2C,CEC,HOTPLUG,电源和GND; 注:1)HOTPLUG脚在未连接从设备时为低电平,连接后会变成高电平,连接过程中强制给HOTLUG脚发100ms低电平系统会重新进行HDMI连接; 2)HDMI_I2C接口用于主设备和从设备间EDID信息和HDCP认证交互。2、接口中各引脚电平的高值如下表所示:NO. PIN ..._hdmi信号波形

python实现stack(栈)和队列(queue)_python stack queue-程序员宅基地

文章浏览阅读9.7k次,点赞4次,收藏28次。栈和队列是两种基本的数据结构,同为容器类型。两者根本的区别在于: stack:后进先出 栈示意图queue:先进先出 队列示意图 注意,stack和queue是没有查询具体某一个位置的元素的操作的。但是他们的排列是按顺序的对于stack我们可以使用python内置的list实现,因为list是属于线性数组,在末尾插入和删除一个元素所使用的时间都是O(1),这非常符合stack的要求。_python stack queue

纠正:Android RecyclerView滚动到指定位置并置顶(滚动方法、移动置顶、定位滑动到指定位置item)_groupedrecyclerviewadapter跳到指定item-程序员宅基地

文章浏览阅读3.1w次,点赞61次,收藏107次。最近博主发现让RecyclerView滑动到某一位置并置顶的博客一大堆,抄的是完全一模一样。此外,虽然这些博客“解决”了这些问题,但这种解决方案过于浅显、粗暴,甚至都违背了开发思想。遂在此纠正这种错误。RecyclerView提供了几种移动的方法scrollToPositionscrollToscrollBysmoothScrollBysmoothScrollToPosit..._groupedrecyclerviewadapter跳到指定item

随便推点

python生成唯一Id的几种方法_python并发生成唯一数据-程序员宅基地

文章浏览阅读2w次,点赞2次,收藏4次。# coding:utf-8import randomdef createRandomString(len): print ('wet'.center(10,'*')) raw = "" range1 = range(58, 65) # between 0~9 and A~Z range2 = range(91, 97) # between A~Z and a~..._python并发生成唯一数据

Maven1-配置及创建JavaSE项目_maven 创建javase工程-程序员宅基地

文章浏览阅读431次。一、Maven简介项目构建工具(不只是管理jar包),项目设计和编码由程序员来做,它做不了;而编译,运行,测试,打包,部署,jar管理它都能做Apache提供,Java开发的,运行Maven要有基本的java开发工具包Maven仓库:存储jar包本地仓库:当前本地电脑远程仓库:局域网中的服务器中央仓库:远程服务器有远程仓库:本地连接远程,远程仓库中有就下载到本地,没有就去连中央仓库,中央仓库下载到远程,远程再下载到本地,适合团队开发,远程仓库可以连接多个本地仓库,所以很多公_maven 创建javase工程

【转载】FPGA配置方式_quartus烧录-程序员宅基地

文章浏览阅读6.3k次,点赞2次,收藏31次。【概要】FPGA配置方式首先介绍下AS、PS、JTAG三种模式的区别。AS模式: 主动串行配置模式。将.pof文件烧写到flash(掉电不丢失)芯片,FPGA器件每次上电时,作为主控制器从配置器件flash(EPCS)主动读取程序文件并存放至FPGA内部的配置存储器(configure RAM),实现逻辑运作,该方法适用于不需要经常升级的场合,一次性读取程序文件;PS..._quartus烧录

GitHub集成Circle CI(附 Circle CI 配置示例文件)_circleci building status github-程序员宅基地

文章浏览阅读1.6k次。文章目录GitHub 集成Circle CICI(持续集成) 简单解释CI 工具Circle的使用将GitHub项目授权给 Circle CI书写 config.yml文件测试 Circle CI 配置文件是否生效备注写在最后GitHub 集成Circle CICI(持续集成) 简单解释CI 即 Continuous Integration. 当代码提交上来有变动的时候,在merge之前自动进行一些流程,如:代码风格检查、单元测试是否通过等。当被merge之后,又会自动进行一些流程,如:自动打包、_circleci building status github

matlab题目如何在一个圆形区域进行三维作图_meshgrid ,边界是圆-程序员宅基地

文章浏览阅读3.2k次,点赞3次,收藏7次。不废话上图[r,t]=meshgrid(0:0.1:2,0:0.02:2*pi);x=r.*cos(t);y=r.*sin(t);z=x.^2+y.^2;mesh(x,y,z)其实在数学上使用了一个圆的参数方程来实现绘制区域为圆形的效果在这个区域上面是一个碗状图形_meshgrid ,边界是圆

jwt token注销_如何用SpringBoot集成JWT实现token验证及token注销?一招教会你-程序员宅基地

文章浏览阅读763次。Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).定义了一种简洁的,自包含的方法用于通信双方之间以JSON对象的形式安全的传递信息。因为数字签名的存在,这些信息是可信的,JWT 可以使用HMAC算法或者是RSA的公私秘钥对进行签名。JWT 请求流程这里还要注意:光理论是不够的。在此顺便送大家十套20..._springboot jwt 注销登陆