Vue入门学习（一）

dreamer_0423

已于 2023-02-01 14:30:15 修改

阅读量226

点赞数

分类专栏：前端文章标签： vue java vue.js

于 2021-01-19 16:37:21 首次发布

本文链接：https://blog.csdn.net/m0_46616045/article/details/112846460

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、Vue学习

1、起步

1.1、引入VUE的依赖

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

1.2、每个 Vue 应用都需要通过实例化 Vue 来实现

var vm = new Vue({
  // 选项
})

1.3、在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：

<div id = "vue_det"></div>

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

1.4、接下来我们看看如何定义数据对象。

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

简单的实例如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 </title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id="vue_det">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>{{details()}}</h1>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#vue_det',
			data: {
				site: "学习是什么",
				url: "www.baidu.com",
				alexa: "10000"
			},
			methods: {
				details: function() {
					return  this.site + " - 学的不仅是技术，更是梦想！";
				}
			}
		})
	</script>
</body>
</html>

1.5、当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lOKlSvGU-1611045369746)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200918135855233.png)]

1.6、除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如

<script type="text/javascript">
	// 我们的数据对象
	var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
	var vm = new Vue({
		el: '#vue_det',
		data: data
	})

	document.write(vm.$data === data) // true
	document.write("<br>")
	document.write(vm.$el === document.getElementById('vue_det')) // true
	</script>

2、Vue.js 模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

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

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

1.1、插值

（1）文本：数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

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

（2）Html：使用 v-html 指令用于输出 html 代码：

<body>
<div id="app">
    <div v-html="message"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>hellp</h1>'
  }
})
</script>

（3）属性：HTML 属性中的值应使用 v-bind 指令。

<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<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>

（4）表达式：Vue.js 都提供了完全的 JavaScript 表达式支持

1.2、指令

指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

常用的V-指令见：https://www.bilibili.com/read/cv3474476/

（6）参数：参数在指令后以冒号指明。

（7）修饰符：修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

1.3、用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

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

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

1.4、过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化

过滤器函数接受表达式的值作为第一个参数

过滤器可以串联：{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：{{ message | filterA(‘arg1’, arg2) }}这里，message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

1.5、缩写

v-bind 缩写

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

v-on 缩写

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

3、Vue.js 条件与循环

3.1、条件判断

v-if v-else v-else-if v-show

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-if和v-show的区别

v-if：当隐藏结构时该结构会直接从整个dom树中移除；

v-show：当隐藏结构时是在该结构的style中加上display:none，结构依然保留。

当组件中某块内容只会显示或隐藏不会被再次改变显示状态，此时用v-if更加合适，例如请求后台接口通过后台数据控制某块内容是否显示或隐藏，且这个数据在当前页不会被修改；

当组件某块内容显示隐藏是可变化的，此时用v-show更加合理，例如页面中有一个toggle按钮,点击按钮来控制某块区域的显示隐藏。

3.2、循环语句

（1）v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})

模板中使用 v-for

<div id="app">
  <ul>
    <template v-for="site in sites">  
      <li>{{ site.name }}</li>
      <li>--------------</li>
    </template>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

（2）v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据：

<div id="app">
  <ul>
    <li v-for="value in object">            //菜鸟教程
    {{ value }}								//http://www.runoob.com 
    </li>									//学的不仅是技术，更是梦想！
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

你也可以提供第二个的参数为键名：

<body>
<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}				//name : 菜鸟教程 
    </li>								//url : http://www.runoob.com 
  </ul>									//slogan : 学的不仅是技术，更是梦想！ 
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})

第三个参数为索引

（3）v-for 迭代整数

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app'
})
</script>

4、Vue.js 计算属性

（1）计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的

<body>
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

（2）computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才

会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

（3）computed setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter

rse().join(‘’)
}
}
})


vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

（2）computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才

会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

（3）computed setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter

dreamer_0423

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门学习（一）

1、Vue学习1、起步1.1、引入VUE的依赖<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>1.2、每个 Vue 应用都需要通过实例化 Vue 来实现var vm = new Vue({ // 选项})1.3、在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：<div id = "v
复制链接

扫一扫