Vue学习笔记1-安装、目录、实例化vue、模板语法

giria
252 阅读8分钟

前言

学习笔记，结合官方文档与菜鸟教程，可能会po上学习代码到github。

Vue介绍

Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

安装

菜鸟教程vuejs安装教程

官方安装手册

目录结构

目录结构

  • build：构建项目webpack相关
  • config：配置相关
  • node_modules：项目依赖块npm相关
  • static：静态资源目录，如图片、字体等。
  • test：初始测试目录，可删除
  • .xxx:这些是一些配置文件，包括语法配置，git配置等。
  • index.html:首页入口文件，你可以添加一些 meta 信息或统计代码啥的。

src目录
开发目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

  • assets: 放置一些图片，如logo等。
  • components: 目录里面放了一个组件文件，可以不用。
  • router：路由相关，做多页面跳转时使用
  • App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
  • main.js: 项目的核心文件。

实例化Vue讲解

每个 Vue 应用都需要通过实例化 Vue 来实现。虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

	<div id="vue_test">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>{{details()}}</h1>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#vue_test',
			data: {
				site: "百度",
				url: "www.baidu.com",
				alexa: "10000"
			},
			methods: {
				details: function() {
					return  this.site + " - 学的不仅是技术，更是梦想！";
				}
			}
		})
	</script>
  • el:DOM 元素中的 id,这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
  • data:定义属性，实例中有三个属性分别为：site、url、alexa。
    • 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
    • 当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
    • 如果后续添加一个新的 property，那么对 b 的改动将不会触发任何视图的更新。所以如果要添加一个后续才会用到的property，需要将它的初始值设为空或者不存在（但是一定要在开始时就进行声明）
    • 这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。
  • methods:定义的函数，可以通过 return 来返回函数值。
  • {{}}用于输出对象属性和函数返回值

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

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

对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。涉及虚拟DOM树的内容。

实例属性与方法

实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。具体见官方文档：API文档

vm.$data === data;//true
vm.$el === document.getElementById('vue_test')//true

Vue模板语法

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。

插值

大括号文本插值

“Mustache”语法 (双大括号) 的文本插值。Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

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

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

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

v-html输出

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<div id="app">
    <div v-html="message"></div>
</div>

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

v-bind属性绑定

Mustache 语法不能作用在 HTML attribute 上,HTML 属性中的值应使用 v-bind 指令。

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

表达式支持

字面意思，大括号内可进行一定表达式计算

<style>
.list-1{
  background: #444;
  color: #eee;
}
</style>
<body>
<div id="app">
	{{5+5}}<br>
	{{ ok ? 'YES' : 'NO' }}<br>
	{{ message.split('').reverse().join('') }}
	<div v-bind:class="'list-' + id">菜鸟教程</div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	ok: true,
    message: 'RUNOOB',
	id : 1
  }
})
</script>

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

指令

指令是带有 v- 前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

参数

参数在指令后以冒号指明。例如，v-bind 指令被用来响应地更新 HTML 属性.

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

v-on 指令指令添加一个事件监听器，它用于监听 DOM 事件，通过它调用在 Vue 实例中定义的方法。

<a v-on:click="doSomething">

动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

<!--
注意，参数表达式的写法存在一些约束
-->
<a v-bind:[attributeName]="url"> ... </a>

attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。

例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

<a v-on:[eventName]="doSomething"> ... </a>
  • 对动态参数的值的约束
    • 动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
  • 对动态参数表达式的约束
    • 动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式

注意! 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：取消点击动作的默认导航行为。

<form v-on:submit.prevent="onSubmit"></form>

用户输入

使用 v-model 指令来实现双向数据绑定

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

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

过滤器（管道？）

类似管道通信，过滤器函数接受表达式的值作为第一个参数。

<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
//对输入的字符串第一个字母转为大写：

可以串联也可以接收参数

缩写

v-bind:x -> :x

v-on:click -> @click

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
avatar
文章
阅读
粉丝