Vue(一)基础语法



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 标签是写在模板里面的。在组件开始使用的时候,就会被替换掉。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值