vue入门

加贝力口贝

已于 2023-05-22 17:41:53 修改

阅读量255

点赞数

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

于 2022-10-11 10:25:55 首次发布

本文链接：https://blog.csdn.net/qq_43102730/article/details/127258153

版权

Vue.js 同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

web前端

14 篇文章 0 订阅

订阅专栏

文章目录

1、介绍
2、基本语法

1、介绍

1.1 Vue.js 是什么

在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。

Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。

官方网站： https://cn.vuejs.org

1.2初识Vue.js

创建文件夹vue_pro

创建文件夹vuejs，将vue.min.js引入文件夹
下载链接: https://v2.vuejs.org/v2/guide/installation.html
在这里插入图片描述
往下滑，找到下图位置

两者的区别：

vue.js没有经过压缩，适合开发测试Debug时使用
vue.min.js代码经过了压缩，适合发布上线时用，节约些资源。

创建 hello.html

<body>
    <script src="vue.min.js"></script>
    <div id="app">
        <!-- 插值表达式-->
        {{message}}
    </div>
    <script>
    //创建一个vue对象
        new Vue({
            el:'#app',//绑定vue作用的范围
            data: {
                message:'hello vue'
            }
        })
    </script>
</body>

这就是声明式渲染： Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作

data: {
message: 'Hello Vue!'
}

1.3创建代码片段

文件 => 首选项 => 用户片段 => 新建全局代码片段文件：
在这里插入图片描述

命名为code-snippets，然后点击回车

把绿色部分替换成自己的代码片段

vue-html.code-snippets

{
	"vue htm": {
		"scope": "html",
		"prefix": "vuehtml",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
			"    <meta charset=\"UTF-8\">",
			"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"    <title>Document</title>",
			"</head>",
			"",
			"<body>",
			"    <div id=\"app\">",
			"",
			"    </div>",
			"    <script src=\"vue.min.js\"></script>",
			"    <script>",
			"        new Vue({",
			"            el: '#app',",
			"            data: {",
			"                $1",
			"            }",
			"        })",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "my vue template in html"
	}
}

然后输入vuehtml就会有提示
在这里插入图片描述

2、基本语法

2.1 基本数据渲染和指令

<script>
    new Vue({
        el: '#app',
        data: {
            msg:'color:green;'
        }
    })
</script>

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写冒号（:）

<div v-bind:style="msg">单向绑定</div>
<div :style="msg">单向绑定</div>

2.2双向数据绑定

<div id="app">
    {{keyword}}
    <br/>
    <input type="text" :value="keyword"/>
    <br/>
    <input type="text" v-model="keyword"/>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            keyword:'双向绑定'
        }
    })
</script>

什么是双向数据绑定？

当数据发生变化的时候，视图也会跟着发生变化

数据模型发生了改变，会直接显示在页面上

当视图发生变化的时候，数据也会跟着同步变化

用户在页面上的修改，会自动同步到数据模型中去

2.3事件

使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

<div id="app">
    <button v-on:click="show()">事件绑定1</button>
    <button @click="show()">事件绑定2</button>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            show() {
                console.log("show.....")
            }
        }
    })
</script>

2.4条件渲染

<div id="app">
    <input type="checkbox" v-model="ok"/>
    <br/>
    <div v-if="ok">选中了</div>
    <div v-else>没有选中</div>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ok:false
        }
    })
</script>

2.5列表渲染

<div id="app">
    <div v-for="user in userList"> {{user.name}} -- {{user.age}} </div>
    <div v-for="(user,index) in userList">
        {{index}} -- {{user.name}} -- {{user.age}}
    </div>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
          userList:[ {"name":"lucy","age":20},{"name":"mary","age":30}]
        }
    })
</script>

2.6实例生命周期

在这里插入图片描述

<div id="app">
    {{msg}}
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg:'hello'
        },
        created() { //在页面渲染之前执行
            debugger
            console.log('created.....')
        },
        mounted() {//在页面渲染之后执行
            debugger
            console.log('mounted.....')
        }
    })
</script>

生命周期选项详解: https://cn.vuejs.org/api/options-lifecycle.html

加贝力口贝

关注

0
点赞
踩
0

收藏

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

在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。
复制链接

扫一扫