做企业网站备案收费吗,外贸快车官网,wordpress 免费APP,wordpress 移动端网页【菜鸡学艺–Vue2–001】模板语法声明式渲染 #x1f996;我是Sam9029#xff0c;一个前端 Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主 **#x1f431;#x1f409;#x1f431;#x1f409;恭喜你#xff0c;若此文你认为写…【菜鸡学艺–Vue2–001】模板语法声明式渲染 我是Sam9029一个前端 Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主 **恭喜你若此文你认为写的不错不要吝啬你的赞扬求收藏求评论求一个大大的赞** 文章目录 【菜鸡学艺--Vue2--001】模板语法[声明式渲染](https://v2.cn.vuejs.org/v2/guide/#声明式渲染)[toc].Vue 文件模板语法templatescriptstylescript中引入文件**data中定义响应式数据** 响应式模板语法--插值
Vue框架使用时一般采用自定义的 .vue后缀名文件
不同于 react 的 .jsx 后缀
Vue采用的思想蕾丝于原生HTML所以才对于许多入门前端开发的同志来说vue的具备很高的易学性相较于其他框架
当前掌握Vue框架之后最大的感悟就在于思维。拨开细节基础学习Vue的过程就是在学习Vue的思维如何使用vue进行编程,不会亚于从编程小白学习编程时经历的思维转变只是学习难度降低了许多
.Vue 文件模板语法
template/template // HTML标签元素
srcipt/srcipt // JS
style/style //css从上面的标签元素来看就很容易去理解
一般来说可以将每一个vue文件看作一个 组件实例 template
作为放置HTML标签的位置其作用就类似body标签元素包括所有的HTML原生标签以及Vue自定义的组件标签通过import引入并需要在组件components对象中注册
不过值得注意的是 template 里面 只能有一个 根元素
template!-- div 及为根元素 --div !-- 注释 采用原生HTML注释符号 --!-- 根元素 下可防置多个 标签元素 --div1/divdiv2/divdiv3/div/div
/templatescript
scriptimport xxx from path // ES6 引入// 暴露vue组件实例对象export default {name:XXX,components:{},data(){return {}},methods:{}}
/scriptstyle
style/style!-- scoped 样式 作用域 限制在当前文件模板使用 --
style scoped/style!-- css 预处理器 --
style langscss scoped/style
!-- or --
style langless scoped/stylescript中引入文件
直接使用 ES6 import
import XXX from xxx // 依赖引入import XXX from ./xxx // 文件引入
import {XXX,YYY} from ./xxx // 文件引入import Xcomps from ./xxx.vue // 组件引入data中定义响应式数据
作为JS框架Vue的核心之一就是实现数据响应式
// 一般都会采用 data 中 return 对象的写法
export default {data(){return {a:hi,}}}一般都会采用 data 中 return 对象的写法目的是保证 该 组件实例对象内定义的的数据不被外部污染闭包的原理
当然你也可以像下面这样写但是不建议除非你时刻记得和明白你在该组件实例中为何要采用这样写法
data: {name: yang
}响应式模板语法–插值
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
spanMessage: {{ msg }}/spanvue 采用 {{ }} 双括号的形式来实现 在 .vue 文件里需要的 template 标签中展示的数据渲染占位
templatediv idappp{{ a }}/p !-- hi 将会 代替 变量a 在网页中显示 --/div/templatescriptexport default {data(){return {aHI,}}}/scriptstyle/style但是要注意的是 {{}} 的使用
{{ 表达式拥有明确结果的语句 }}
{{ a }} // a 变量
{{ a ? 0:1 }} // 三元运算
{{ a 1 }} // a 四则运算
{{ a.split().reverse().join() }} // a 数组运算**另外注意**模板表达式都被放在沙盒中只能访问全局变量的一个白名单如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。 我是Sam9029一个前端 文章若有错误敬请指正 **恭喜你都看到这了求收藏求评论求一个大大的赞不过分吧**
