【菜鸡学艺–Vue2–001】模板语法&声明式渲染

🦖我是Sam9029，一个前端

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

---

文章目录

• 【菜鸡学艺--Vue2--001】模板语法&[声明式渲染](https://v2.cn.vuejs.org/v2/guide/#声明式渲染)
• • @[toc]
  • .Vue 文件模板语法
  • • `template`
    • `script`
    • `style`
    • `script`中引入文件
    • **`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注释符号  --><!-- 根元素 下可防置多个 标签元素  --><div>1</div><div>2</div><div>3</div></div>
</template>

---

script

<script>import xxx from 'path' // ES6 引入// 暴露vue组件实例对象export default {name:'XXX',components:{},data(){return {}},methods:{}}
</script>

---

style

<style></style><!-- scoped 样式 作用域 限制在当前文件模板使用 -->
<style scoped></style><!-- css 预处理器 -->
<style lang='scss' scoped></style>
<!-- or -->
<style lang='less' scoped></style>

---

script中引入文件

直接使用 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”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

vue 采用 {{ }} 双括号的形式来实现 在 .vue 文件里需要的 template 标签中展示的数据渲染占位

<template><div id="app"><p>{{ a }}</p> <!-- hi 将会 代替 变量a 在网页中显示 --></div></template><script>export default {data(){return {a：'HI',}}}</script><style></style>

但是要注意的是 {{}} 的使用

{{ 表达式（拥有明确结果的语句） }}

{{ a }} // a 变量
{{ a ? 0:1 }} // 三元运算
{{ a + 1 }} // a 四则运算
{{ a.split('').reverse().join('') }} // a 数组运算

**另外注意：**模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

---

🦖我是Sam9029，一个前端

文章若有错误，敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**