Vue快速入门(Vue2.x)

七夕来袭!是时候展现专属于程序员的浪漫了!你打算怎么给心爱的人表达爱意?鲜花礼物?代码表白?还是创意DIY?或者…无论那种形式,快来秀我们一脸吧!

Vue快速入门(Vue2.x)_第1张图片


1、Vue.js 是什么?


Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架

Vue 的核心库只关注视图层,不仅易与上手,还便于与第三方库或已有项目整合。

另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定组合的视图组件

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

Vue快速入门(Vue2.x)_第2张图片

2、入门案例

第一步:创建一个html页面,并生成html骨架。

Vue快速入门(Vue2.x)_第3张图片

第二步:引入vue.js文件(本地引入和cdn方式都可以)

# cdn方式
<script src="https://unpkg.com/vue/dist/vue.js">script>
# 本地引入
<script src="vue.min.js">script>

Vue快速入门(Vue2.x)_第4张图片


第三部:在html页面创建div标签,并为div标签配置id属性。
<div id="app">div>

Vue快速入门(Vue2.x)_第5张图片


第四部:编写vue代码(固定结构)

<script>
    // 创建一个vue对象
    new Vue({
        el:'#app', //通过“css选择器字符串”获取对应的DOM标签
        data: {    //定义页面中显示的模型数据,并共享el所指向的容器
            message: 'Hello Vue!'
        }
    })
script>

Vue快速入门(Vue2.x)_第6张图片


第五步:使用 插值表达式 获取data属性里面的数据。

{{message}}

Vue快速入门(Vue2.x)_第7张图片

执行测试:

Vue快速入门(Vue2.x)_第8张图片

  • 声明式渲染:Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。(这里通过模板语法,告诉浏览器一个结果,哪里该渲染什么数据,而我们也能清楚明白哪里能显示什么内容,而不是注重为什么能实现这个结果)

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


3、在VSCode中创建代码片段


文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段:vue-html.code-snippets
Vue快速入门(Vue2.x)_第9张图片

{
	"vue htm": {
		"scope": "html",
		"prefix": "vuehtml",
		"body": [
			"DOCTYPE html>",
			"",
			"",
			"<head>",
			" ",
			" ",
			" ",
			" <title>Documenttitle>",
			"head>",
			"",
			"<body>",
			" 
", "", " div>", "

你可能感兴趣的:(前端技术,vue.js,前端,javascript)