Vue.js 的基本语法

Posted 2021-03-20 ressso

Vue.js 是什么？

Vue (读音 /vju?/),是一套用于构建用户界面（前端）的渐进式框架

Vue 直接作用在 html 文件上，通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地 将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>
<script>
var app = new Vue({
    //绑定 DOM 标签，el 对象绑定 html 标签
  el: ‘#app‘,
   // 数据声明，data 对象中声明数据变量，格式为 key:value()，在html 中使用 {{引用数据的 key}}
  data: {
    message: ‘Hello Vue!‘
  }
})
</script>

 

 

在 Vue 中 一切都是是以 键值对的方式来体现： key:value

在 HTML 中如何获取 Vue 定义的数据声明？

使用数据绑定

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

• 使用双大括号：{{ 引用数据的 key }}　　
  • {{ }}的方式是文本插入值，会将括号内引用的数据作为字符串的形式展现
  • 无论何时，绑定的数据对象上  message 属性发生了改变，插值处的内容都会更新，同理，当插值处（例如文本框type="text"）发生改变时，数据对象 message 也会发生改变
  • 这就是 Vue 的双向绑定
• 通过使用  v-once 指令，你也能执行一次性地插值，当数据改变时

  • <span v-once>这个将不会改变: {{ message }}</span>

　　

Vue 指令

指令 (Directives) 是带有 v- 前缀的特殊特性

指令特性的值预期是单个 javascript 表达式 (v-for 是例外情况)

例如：

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

这里，v-if 指令将根据表达式 seen 的值的真假来 插入或者 移除  <p> 元素。( 若 seen 有值，且值不是null和 空字符串，就会 显示 <p> 标签 )

 

　　# 参数

• 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：

 <a v-bind:href="url">链接</a> 

• 在这里 href 是参数，告知 v-bind  指令将该元素的  href 特性与表达式  url 的值绑定
• 另一个例子是 v-on 指令，它用于监听 DOM 事件

<a v-on:click="toMethod">一段文字。。。</a>

 

　　将 a 表绑定一个 click事件，当点击 a 标签时触发事件，将调用 methods 中一个 名为 toMethod 的方法

 methods:{
            toMethod:function(){
                alert("点击了 toMethod")
            }
        }

 

 

　　# 缩写

　　v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。然而，对于一些频繁用到的指令来说，就会感到使用繁琐。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

• v-bind 缩写

  • <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    
    <!-- 缩写 -->
    <a :href="url">...</a>

• v-on 缩写

  • <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    
    <!-- 缩写 -->
    <a @click="doSomething">...</a>

     

Vue常用7个属性

 

• el 属性
  • 绑定 DOM 标签，el对象绑定 html 标签，指示 vue 编译器从什么地方开始解析 vue的语法
• data 属性
  • 数据声明，data 对象中声明数据变量，格式为 key:value()，在html 中使用 {{引用数据的 key}}
• methods 属性
  • 方法定义，在vue 中，方法必须定义在 methods 对象中
• template
• render
• computed
• watch

 

Vue 常用指令

v-bind 指令

    绑定 一个 HTML 标签的属性，该绑定是双向的

v-if 指令

v-else 指令

    条件判断

v-for 指令

    循环遍历: v-for="(i,index) in args"、v-for="i in args"

    其中 index 是循环的角标，通过声明 index 来获取角标

v-on 指令

　　用于给监听DOM事件，它的用语法和v-bind是类似的

v-show 指令