【菜鸡学艺–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`中定义响应式数据**
  • 响应式模板语法--插值

Vue框架使用时，一般采用自定义的 .vue后缀名文件

不同于 react 的 .jsx 后缀

Vue采用的思想蕾丝于原生HTML，所以才对于许多入门前端开发的同志来说，vue的具备很高的易学性，相较于其他框架

（当前掌握Vue框架之后，最大的感悟就在于，思维。拨开细节基础，学习Vue的过程就是在学习Vue的思维，如何使用vue进行编程,不会亚于从编程小白学习编程时经历的思维转变，只是学习难度降低了许多）

.Vue 文件模板语法

<template>template> // HTML标签元素
<srcipt>srcipt> // JS
<style>style> //css
1
2
3

从上面的标签元素来看就，很容易去理解

一般来说，可以将每一个vue文件看作一个 组件实例

---

template

作为放置HTML标签的位置，其作用就类似body标签元素，包括所有的HTML原生标签，以及Vue自定义的组件标签（通过import引入，并需要在组件components对象中注册）

不过值得注意的是 template 里面 只能有一个 根元素

<template>
    
    <div> 
        
        
        <div>1div>
        <div>2div>
        <div>3div>
    div>
template>
1
2
3
4
5
6
7
8
9
10

---

script

<script>
    import xxx from 'path' // ES6 引入
    
    // 暴露vue组件实例对象
    export default {
        name:'XXX',
        components:{},
		data(){
            return {}
        },
        methods:{
            
        }
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

style

<style>style>


<style scoped>style>


<style lang='scss' scoped>style>

<style lang='less' scoped>style>
1
2
3
4
5
6
7
8
9

---

script中引入文件

直接使用 ES6 import

import XXX from 'xxx' // 依赖引入

import XXX from './xxx' // 文件引入
import {XXX,YYY} from './xxx' // 文件引入

import Xcomps from './xxx.vue' // 组件引入
1
2
3
4
5
6

data中定义响应式数据

作为JS框架，Vue的核心之一就是实现数据响应式

// 一般都会采用 data 中 return 对象的写法
export default {
     data(){
         return {
             a:'hi',
         }
     }
 }
1
2
3
4
5
6
7
8

一般都会采用 data 中 return 对象的写法，目的是保证 该 组件实例对象内定义的的数据不被外部污染，闭包的原理

当然你也可以像下面这样写，但是不建议，除非你时刻记得和明白你在该组件实例中为何要采用这样写法

data: {
    name: 'yang'
}
1
2
3

---

响应式模板语法–插值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

Message: {{ msg }}
1

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

<template>
    <div id="app">
        <p>{{ a }}p> 
        
    div>
  template>
  
  <script>
  export default {
      data(){
          return {
              a：'HI',
          }
      }
  }
  script>
  <style>style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

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

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

**另外注意：**模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
上诉意思即为：
{{}} 语法可以访问 data中定义的变量，（全局变量）白名单（Math、Date）

{{ new Date() }} // or {{ Math.random() }} 
{{ a }} // a 在data 中已定义
1
2

---

🦖我是Sam9029，一个前端

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

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