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

【菜鸡学艺--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中定义响应式数据 响应式模板语法--插值)
• @[toc] @[toc] .Vue 文件模板语法 template script style script中引入文件 data中定义响应式数据 响应式模板语法--插值)
• .Vue 文件模板语法 @[toc] .Vue 文件模板语法 template script style script中引入文件 data中定义响应式数据 响应式模板语法--插值)
• `template` @[toc] .Vue 文件模板语法 template script style script中引入文件 data中定义响应式数据 响应式模板语法--插值)
• `script` @[toc] .Vue 文件模板语法 template script style script中引入文件 data中定义响应式数据 响应式模板语法--插值)
• `style` @[toc] .Vue 文件模板语法 template script style script中引入文件 data中定义响应式数据 响应式模板语法--插值)
• `script`中引入文件 @[toc] .Vue 文件模板语法 template script style script中引入文件 data中定义响应式数据 响应式模板语法--插值)
• **`data`中定义响应式数据** @[toc] .Vue 文件模板语法 template script style script中引入文件 data中定义响应式数据 响应式模板语法--插值)
• 响应式模板语法--插值 @[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，一个前端

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

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