Vue Chapter1 基础语法

2022-09-14Updated 2023-10-30Frontend / Vue4 minutes read (About 651 words)0 visits

基本Vue语法规则学习笔记，方便我们去自定义和看懂别人的网页代码。

概念补充：

DOM
超文本标记语言HTML查表
Attribute和<>协同使用，在其中定义括起来的“文本”的属性

Template Syntax

vue的模版语法是基于HTML的，但是在底层机制中，会将模版编译成高度优化的JS代码，因此可以通过：

HTML style 默认
JSX, 编写渲染函数而不使用模版，但是这样不会享受 VUE 自带的优化。

声明式渲染

Vue.js的核心是通过一个简洁且统一的模版来将声明式数据渲染进DOM的系统，换言之，也就是另一种形式的定义式。

文本插值例子，html从变量中获取message

1
2
3

<div id="app">
  {{message}}
</div>

var app = new Vue{{
  el: '#app',
  data: {
    message: "hello vue!"
  }
}}

元素绑定例子: 在页面上绑定一个函数（使用v-bind和span？），然后如文本插值的例子一般，只是将message绑定为函数like：message: '页面加载于' + new Date().toLocaleString()

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息
  </span>
</div>

此处的div是一个纯粹的容器，其通过id来指定内容的格式来自何处，从而调用定义的app2的DOM？

带有v-前缀的属性为vue提供的特殊attribute，在这里的含义是将这个元素节点的title attribute和vue实例中的message（id指定？）保持一致。

（结构绑定）条件语句，同样要通过div id来指定我们的vue实例，然后通过v-if来执行条件语句。

1
2
3

<div id="app-if">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new vue{{
  el: '#app3',
  data:{
    seen: true
  }
}}

循环语句：使用v-for来进行数组的循环从而渲染项目列表

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

交互模块（包含用户交互处理），使用v-on可以添加时间监听器，结合bottom使用

<div id="app-5">
  <p>
    {{message}}
  </p>
  <buttom v-on:click="reverseMessage">反转消息</buttom>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})