1. vue简介

vue的组件化

后缀名为.vue的文件是vue.js特有文件格式，表示一个vue组件，即单页式组件，可承载视图模板-,“样式定义”-

2.vue扩展插件

vue-cli:脚手架
vue-resource(axios):ajax请求
vue-router:路由管理
vuex:状态管理
vue-lazyload:图片懒加载
vue-scroller:页面滚动
mint-ui:移动端UI组件库
element-ui:PC端UI组件库
...

3.模板

插值

用双大括号{{}}引住的内容被称为"Mustache"语法
Mustache标签会被相应的数据对象属性值替换,且当这个属性变化是也会随之更新

运行结果：

插值-双大括号表达式

插值支持js表达式进行运算及简单处理

<p>{{name.toUpperCase()}}</p>

三大括号表达式

被废除，使用不当导致xss攻击，功能由v-html代替

v-text和v-html

v-text等价于{{}}
用法：<p v-text="mesg"></p><p v-html="mesg"></p>

v-bind指令

强制绑定
用法：

<a href="url">lianjie</a><a v-bind:href="url">lianjie</a><a :href="url">lianjie</a>

使用效果：

v-on指令

强制数据绑定
用法：

<button v-on:click="go">Chilk me</button><button @click="go('test')">Chilk me</button><button @click="go(msg)">Chilk me</button>
methods:{go(msg){console.log("点击了按钮! msg="+msg)}}

运行结果：
解释：不带参调用返回其类型；带参调用分两种，第一种带单撇号，其结果就是这个字符串。不带单撇号，返回这个字符串绑定的函数值

{{}}导致加载闪烁问题目前没有遇见

参见链接：https://blog.csdn.net/ABAP_Brave/article/details/81677158

1.vue简介以及模板语法---vue教程相关推荐

Vue 第一天:模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
VUE中的模板语法以及过滤器和双向数据绑定
目录: 1. 模板语法 1.1 插值 1.1.1 文本 1.1.2 html 1.1.3 属性 1.1.4 表达式 1.2 指令 1.2.1 核心指令 1.2.1.1 v-if |v-else-if| ...
Vue模板语法---vue工作笔记0003
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 我们再去看一下vue的模板语法: 首先看看上一节看的那个mvvm的模型. 中间这个viewMode ...
【猿说VUE】初试模板语法，开启VUE编码之旅
模板语法官网描述: Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的 ...
VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客:https://www.liboer.top/articles/detail/vue-BasedUse/ 文章目录 VUE.js 基础安装 CDN 下载安装命令行工具(CLI脚手 ...
学习Vue3 第四章（模板语法 vue指令）
模板插值语法在script 声明一个变量可以直接在template 使用用法为{{变量名称}} <template><div>{{ message }}</div> ...
vue.js 01 模板语法
文章目录 vue插值 vue指令 vue插值代码: <!DOCTYPE html> <html lang="en"> <head><me ...
Vue入门（一）—— 模板语法
Vue.js 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合. 什么是渐进 ...
01 【Vue简介初识Vue 模板语法和数据绑定】
1.Vue简介 1.1官网英文官网中文官网 1.2介绍与描述 Vue 是一套用来动态构建用户界面的渐进式JavaScript框架 ○构建用户界面:把数据通过某种办法变成用户界面 ○渐进式:Vue可 ...

1.vue简介以及模板语法---vue教程