Vue菜鸟教程_01起步

最新推荐文章于 2024-09-11 20:40:52 发布
最新推荐文章于 2024-09-11 20:40:52 发布
阅读量248 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40828705/article/details/103900562
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>maby 的 第一个Vue.js</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:'maby 的 第一个Vue.js'
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>

    <div id="vue_dat">
        <h1 style="color: red">name:{{name}}</h1> <!-- {{ }} 用于输出对象属性和函数返回值。-->
        <h2 style="color: brown">age:{{age}}</h2>
        <h3 style="color: yellow">salary:{{salary}}</h3>
        <h4 style="color: greenyellow">{{details()}}</h4>

    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#vue_dat', // 在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中.
            data:{ // data 用于定义属性，实例中有三个属性分别为：name、age、salary。
                name:"mabingyang",
                age:"23",
                salary:"20000"
            },
            methods:{
                details:function () { // methods 用于定义的函数，可以通过 return 来返回函数值。
                    return this.name + "is 马炳阳"
                }
            }
        })
    </script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>

    <div id="vue_det">
        <h1 style="color: greenyellow">name:{{name}}</h1>
        <h2 style="color: green">age:{{age}}</h2>
        <h3 style="color: red">salary:{{salary}}</h3>
    </div>

    <script type="text/javascript">

        // 数据对象
        var data = {name:"mabingyang",age:"23",salary:20000}
        var vm = new Vue({
            el:"#vue_det",
            data:data
        })

        // 引用相同的对象
        document.write(vm.name == data.name) // true
        document.write("<br>")

        // 设置属性也会影响到原始数据
        vm.name = "马炳阳"
        document.write(data.name) //  马炳阳
        document.write("<br>")

        // 反过来也一样
        data.salary = 30000
        document.write(vm.salary)

    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h3 style="color: red">{{name}}</h3>
        <h3 style="color: green">{{age}}</h3>
        <h3 style="color: greenyellow">{{salary}}</h3>
    </div>


<!--
    除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
-->
    <script type="text/javascript">

        // 数据对象
        var data = {name:"mabingyang",age:23,salary:10000}
        var vm = new Vue({
            el:"#vue_det",
            data:data
        })

        document.writeln(vm.$el === document.getElementById("vue_det")) // true
        document.write("<br>")
        document.write(vm.$data === data) // true


    </script>

</body>
</html>
炳烛之明科技
关注
专栏目录
【菜鸟教程】vue项目创建
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
04-17 357
????0开始创建项目安装vue:已经安装nodejs,需要创建vue项目B 首先我们要安装nodejs,可以找我们博客内nodejs安装教程 本地网络情况不怎么乐观情况下： sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue: 通过如下命令： sudo cnpm install --global vue-...
Vue构造器
weixin_35988035的博客
12-16 1400
Vue构造器 一、什么是Vue 构造器 每个Vue.js 应用都是通过构造函数Vue()，实例化Vue来实现的。 通过Vue实例，将Vue实例的成员与DOM相关联 语法格式如下： var vm = new Vue({ // 参数 }) 二、Vue构造器的参数 在介绍Vue构造器的参数之前，先看一看Vue的测试实例。通过实例，来逐步介绍Vue构造器的参数： <!DOCTYPE htm...
Vue菜鸟教程
热门推荐
weiyifang11的博客
07-31 1万+
Vue框架快速入门 1.Vue的认识 1.1 什么是Vue？ Vue是一个开源的javascript框架，并且Vue支持mvc和mvvm两种模式。 Vue是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，是又一个js库。 MVC：Model(模型),View(视图),Controller(...
构建响应式 Web 应用：Vue.js 基础指南
最新发布
m0_53117341的博客
09-11 1190
构建响应式 Web 应用：Vue.js 基础指南一 . Vue 的介绍1.1 介绍1.2 好处1.3 特点二 . Vue 的快速入门2.1 案例 1 : 快速搭建 Vue 的运行环境 , 在 div 视图中获取 Vue 中的数据2.2 案例 2 : 点击按钮执行 vue 中的函数输出 vue 中 data 的数据2.3 小结三 . Vue 常用指令3.1 介绍3.2 文本插值 v-html3.3 绑定属性 v-bind3.3.1 绑定属性的值3.3.2 绑定属性3.4 条件渲染 v-if3.5 条件渲染 v
vue——菜鸟教程学习
weixin_42109930的博客
06-27 1万+
此篇文章仅仅是提纲摘要，用于自己学习时的一个笔记1. v-if：条件语句；v-show2. v-for：循环语句3. computed和methods：计算属性4. watch：监听属性5. 样式绑定：v-bind6. v-on：事件处理器7. Vue的表单：简言之，vue是MVVM模型，即：view：管理DOM事件Model：进行js逻辑处理ViewModel：是view和model之间的桥梁，进行DOM事件监听和数据交互v-modle会根据控件类型自动选取正确的方法来更新元素，进行双向绑定；我们可以在前
Vue.js 教程---菜鸟教程
yitong的博客
05-04 7502
文章目录教程安装起步模板语法插值指令用户输入过滤器缩写条件语句循环语句计算属性监听属性样式绑定事件处理器表单组件组件 - 自定义事件自定义指令钩子路由( vue-router )过渡 & 动画过渡Ajax(axios)安装方法：GET 方法POST 方法执行多个并发请求axios API响应接口实例导航菜单编辑文本订单列表搜索页面切换不同布局 教程 本教程主要介绍了 Vue2.x 版本的使用 第一个实例： <body> <div id="app"> <p>{{
Vue3 菜鸟入门（二）超详细：基本框架 模板语法和指令
小for学习栏
09-19 1892
本文主要内容含Vue 基本框架 模板语法、指令，手把手教学、腾讯会议一对一培训，所有代码都要敲一遍，有问题随时暂停解决。
VUE快速入门（一）
qq_20255621的博客
07-29 315
VUE快速入门，简单上手 在这之前，让我们先了解什么是vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 学习VUE前提 需要了解关于 HTML、CSS 和 JavaScript 的中级知识。 如果你并没学过或者刚开始学以上条件，
vue菜鸟从业记：公司项目里如何进行前后端接口联调
weixin_33809981的博客
07-05 4512
最近我的朋友王小闰进入一家新的公司，正好公司项目采用的是前后端分离架构，技术栈是王小闰非常熟悉的vue全家桶，后端用的是Java语言。在前后端开发人员碰面之后，协商确定好了前端需要的数据接口（扯那么多，其实也就是关于json数据的字段的定义），然后前后端程序猿就嗨皮地并线开发去了。 前后端联调前夕 我的朋友王小闰他们这家公司做本地旅游项目...
Vue自学（二）基本代码框架
李小由的菜鸡博客
11-25 439
一、Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下： var vm = new Vue({ // 选项 }) 接下来让我们通过实例来看下 Vue 构造器中需要哪些内容， 可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中， 这意味着我们接下来的改动全部在以上指定的 di...
Vue.js入门：实例化与响应式数据绑定
site: "菜鸟教程", url: "www.runoob.com", alexa: 10000 }, methods: { // 定义方法 details: function() { return this.site + "-学的不仅是技术，更是梦想！"; } } }); ``` 在这个例子中，`el`选项告诉...
vue菜鸟教程
weixin_43706224的博客
05-24 3628
数据变化，对象属性也会变化：反之亦然。 事件处理v-on章节着重处理
跟菜鸟教程快速搭建并简单使用Vue
liaojsgtcg的博客
08-06 2329
这篇博客只描述vue-cli (终端建立vue项目后的使用) ，使用vue项目框架前建议先去官网看视频学习基本的指令，也可以后面再学。建立项目后要先搞明白项目的目录都有什么用，可以看菜鸟教程的图片，主要是了解配置文件跟编写代码的位置。...
【学习笔记】【Vue】【菜鸟教程】学习笔记
南方者的博客
09-15 384
【来源】：https://www.runoob.com/vue2/vue-install.html 【菜鸟教程】学习笔记一、【安装与运行】二、【项目结构】三、【起步】（一）你好，南方。 一、【安装与运行】 // 全局安装 vue-cli cpnm install --global vue-cli // 创建一个基于webpack模板的新项目 vue init webpack mywork // 后面需要进行一些配置，默认回车就可以 // 完事后 cd mywork cnpm install cnpm run
Vue.js菜鸟教程自学（一）
NDSoumig的博客
08-09 1万+
导入js: 一、hello vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue....
vue.js 菜鸟学习
masterShaw的博客
07-20 976
url： http://www.runoob.com/vue2/vue-custom-directive.html
vue随笔（菜鸟教程整理）001
Evan_Ada
08-12 491
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
vue基础教程01
panpanpanqvq的博客
12-18 212
1.Vue.js 是什么 Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目的开发) 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果的MVVM框架； 2.起步 vue中可以使用插值表达式,可以定义组件，组件是HTML元素的扩展，可自定义其数据与行为。例如通过
Vue3 菜鸟入门（一）超详细：介绍、安装、打包、创建项目、目录结构、起步等
小for学习栏
09-19 3757
本文主要内容含Vue3介绍、安装、打包、创建项目、目录结构、起步等内容，Vue 、Vue 3、Java、Spring Boot、Idea、数据库、一对一、培训、教学。
快速安装Vue调试工具：vue_devtools_chrome_5.3.4.crx
资源摘要信息:"vue_devtools_chrome_5.3.4.crx是一个针对Chrome浏览器的Vue.js调试工具，专为vue 2.x版本设计。这个插件允许开发者在Chrome开发者工具中进行Vue应用程序调试，无需自己编译即可直接安装使用。安装...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值