Vue（一）基础语法

文章目录

• Vue 基础语法
• • • 1.Vue的原理
    • 2.绑定
    • 3.切换一个元素是否要显示
    • 4.v-on
    • 5.V-model
    • 6.组件
• 二.响应式框架
• • • 2.数据与方法
    • 3.钩子函数
  • 2.模板语法
  • • 1.插值
    • 2.指令
    • 3.缩写
    • 4.监听事件
  • 3.表单的输入绑定
  • • 1.文本
    • 2.复选框
    • 3.单选多选框
  • 2.组件
  • • 1.组件名
    • 2.全局注册
    • 3.插槽

---

Vue 基础语法

---

1.Vue的原理

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Vue 是响应式的框架，打开你的浏览器的 JavaScript 控制台 ，并修改 app.message 的值，你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

注意 Vue能对其挂载的DOM 元素进行完全的控制，html就是一个入口而已。Html 凡事都得听 Vue 的

---

2.绑定

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

v-bind: ***= mesaage 是绑定命令，用上这个命令，就表示HTML5 这***的结果到底要展现个啥必须要听后边Vue的。

如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = ‘新消息’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新

---

3.切换一个元素是否要显示

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。

v-if 实际跟的就是一个布尔值。这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

如果使用V-for命令，那么items必须要是一个数组，格式[ ]

---

4.v-on

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它 调用在 Vue 实例中定义的方法：

一般捆绑的是个按键。
this 上下文指的是调用他的Vue实例

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

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

---

5.V-model

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

使用 V-model 命令，相当于把 Vue 的实例当了一个中转站，实现了在html 的输出和输出即时的反应。注意，V-model是绑在输入一方的。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

---

6.组件

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用

组件就是自己定义一个组件格式：组件的内部上使用 props 属性往组件内部传参的。然后再用的时候，直接把组件名写上就行，使用 V-bind：props= ‘itme‘ 命令，向组件内部的 prop 接口传参。

 <div id="app-7">
        <ol>
            <todo-item v-for="item in groceryList" 
            v-bind:todo="item" 
            v-bind:key="item.id"
            ></todo-item>
        </ol>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })

        var app7 = new Vue({
            el: '#app-7',
            data: {
                groceryList: [
                {id: 0, text: '蔬菜' },
                {id: 1,text: '奶酪'},
                {id: 2,text: '随便其它什么人吃的东西'}
                ]
            }
        })
    </script>

---

二.响应式框架

网页的响应式设计是一种设计实践，这种设计实践是随着移动互联网时代的到来而逐渐兴起的。随着智能设备的兴起，人们不再仅仅是通过个人电脑来访问网页，还有可能使用智能手机或者平板电脑，如何适配各种不同尺寸大小，不同分辨率的设备，为网页设计带来了新的挑战。而响应式设计就是一种解决方案，采用响应式设计后，同样的一个网页会在不同设备上显示不同的布局，从而带来良好的用户体验。

2.数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说得是在 Vue 里面的data里面才行。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

3.钩子函数

同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。类似于 .net core 的 filter 函数。

2.模板语法

1.插值

<span>Message: {{ msg }}</span>

无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

2.指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

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

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素

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

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

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

3.缩写

v-bind 绑定

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

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

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

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

4.监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }})

内联处理器中的方法：

可以直接把参数传进方法里

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }}})

3.表单的输入绑定

你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

简单点来理解： html 页面上显示的元素，一般应该是听 Vue 实例的，加了 V-model就是把他反过来了

1.文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

2.复选框

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }})

最终的效果：

他为什么能够通过 V-mode 标签就能显示，就是因为 vue 很智能 会根据控件类型自动选取正确的方法来更新元素

3.单选多选框

内容比较多，用到的时候再看官方文档吧。

2.组件

1.组件名

在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：

Vue.component('my-component-name', { /* ... */ })

该组件名就是 Vue.component 的第一个参数。

给组件起名的时候建议使用 W3C规范 ，要求字母全小写，并且必须包含一个连字符。

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

使用的话这么使用：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

最终的效果图：

2.全局注册

---

内容都比较简单，直接看官网吧：https://cn.vuejs.org/v2/guide/components-registration.html

3.插槽

---

插槽现在使用统一的语法 v-slot

它允许你像这样合成组件：

<navigation-link url="/profile">
  Your Profile
</navigation-link>

然后你在 <navigation-link> 的模板中可能会写为：

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

这样当组件渲染的时候，当组件渲染的时候，<slot></slot> 将会被替换为“Your Profile”。
注意，slot 标签是写在模板里面的。在组件开始使用的时候，就会被替换掉。