【菜鸡学艺–Vue2–001】模板语法&声明式渲染
🦖我是Sam9029，一个前端
Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主
**🐱🐉🐱🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**
Vue框架使用时，一般采用自定义的 .vue后缀名文件
不同于 react 的 .jsx 后缀
Vue采用的思想蕾丝于原生HTML，所以才对于许多入门前端开发的同志来说，vue的具备很高的易学性，相较于其他框架
（当前掌握Vue框架之后，最大的感悟就在于，思维。拨开细节基础，学习Vue的过程就是在学习Vue的思维，如何使用vue进行编程,不会亚于从编程小白学习编程时经历的思维转变，只是学习难度降低了许多）
Vue__21">.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>javascript">
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>javascript">
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，一个前端
文章若有错误，敬请指正🙏
**🐱🐉🐱🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**
