vue3学习（模板语法）

创建一个vue项目

1.先在vs code终端输入vue create 项目名

2.选择Manually select features(手动选择选项)，按enter确定

3.选择Babel(javascript的编译器，可以使代码向下兼容)，progressive web app pwa support（提升网站的体验。按enter确定

4选择3.x(此项为选择vue的版本，我选择的为vue3). 按enter确定

5.选择 In dedicated config files(使用专用的配置文件夹放置配置文件)，按enter确定

6.输入n(此项为是否将上述配置设为预设配置)。按enter确定

那么一个vue3项目就创建好了。在控制台输入cd 项目名和npm run serve即可运行项目。

编写代码位置：src/component/HelloWorld.vue。

assets:存放静态资源。包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件以及其他资源类文件。之所以强调是公共的 css 文件，是因为要在组件的 css 标签里加入 ‘scoped‘ 标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式；

component：存放公共组件。。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们作为公共组件，避免重复工作；

app.vue:主入口组件。可以把app.vue理解成根组件，所有的组件都是从app.vue开始的，都是从这里引用并显示的。

Main.js:主入口文件。相当于java语言中的public void main()。

registerServiceWorker.js:相当于一个监听文件。做到哪一步提供相应的文字提示。

模板语法

1．<template></template>里可以理解为就是写html的，<script></script>里是写业务逻辑的。

2．数据绑定最常见的形式就是使用双大括号的文本插值，就相当于将一个变量文本放入括号里，配合js里的data()设置数据。加了双括号则可以对该值进行改变。

3.双括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML,需要使用v-html指令。即双括号里只能将内容变成文本，v-html能识别内容并转换为正确的html格式。

4.双括号语法无法在HTML属性中使用，但是可以用v-bind指令。（v-bind：可以简写为：）

5．使用javascript表达式：在上述模板中，一直都只绑定简单的property（简单来说property是元素对象的属性）键值。Vue.js都提供了完全的javascript表达式。

这些表达式会在当前活动实例的数据作用域下作为javascript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的表达式都不会生效。

本人目前也刚学vue，如有错误或问题欢迎探讨！

vue3学习（模板语法）相关推荐

学习Vue3 第四章（模板语法 vue指令）
模板插值语法在script 声明一个变量可以直接在template 使用用法为{{变量名称}} <template><div>{{ message }}</div> ...
Vue3学习之旅--Vue3高级语法补充-自定义指令，vue插件，Teleport......
文章目录 Vue3高级语法补充自定义指令认识自定义指令实现方式一:默认实现实现方式二:局部自定义指令方式三:自定义全局指令指令的生命周期指令的参数和修饰符自定义指令练习时间格式化指令 ...
image是否有disabled属性_Vue学习笔记模板语法、计算属性
点击上方"蓝字"关注我们吧! vue学习笔记官网:https://cn.vuejs.org/v2/guide/ 1.vue体验 demo示例: image.png 示例代码: & ...
Vue学习心得记录之模板语法
下面是我这半年以来总结的Vue学习笔记,帮助自己复习学习Vue的基本用法.有需要的同志可以参考下. Vue的模板语法 Vue有很简单的模板语法,这些Vue指令用来响应式改变渲染DOM可以快速入门上手这 ...
从零学习Vue - 02模板语法、el与data两种写法、mvvm模型、数据代理
root容器里的代码被称为模板,有了模板会有特殊的模板语法.Vue模板中语法有两大类,一类是插值语法,另一类是指令语法. 插值语法功能:用于解析标签体内容.写法:{{xxx}},xxx为js表达式, ...
光脚丫思考Vue3与实战：第04章模板语法第01节概述+插值
下面是本文的屏幕录像的在线视频: 光脚丫思考Vue3与实战:第04章模板语法第01节插值温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baid ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
C++模板学习02（类模板）（类模板语法、类模板与函数模板的区别、类模板中的成员函数创建时机、类模板对象做函数参数、类模板与继承、类模板成员函数类外实现、类模板分文件编写、类模板与友元）
C++引用详情(引用的基本语法,注意事项,做函数的参数以及引用的本质,常量引用) 函数高级C++(函数的默认参数,函数的占位参数,函数重载的基本语法以及注意事项) C++类和对象-封装(属性和行为作为 ...
Vue官网学习（模板语法：一、{{}}双大括号语法）
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析 ...

vue3学习（模板语法）

vue3学习（模板语法）相关推荐

最新文章

热门文章