vue基本操作[2] 续更----让世界感知你的存在-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue基本操作[2] 续更----让世界感知你的存在。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue文件解析

什么是<template/>标签

template是html5新元素，主要用于保存客户端中的内容，表现为浏览器解析该内容但不渲染出来，可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。

关于单文件组件

vue的单文件相当于一个页面中的组件，包含了关于该组件的html-css-js文件集合，这么做的目的有利于项目的管理和整合，官方说法是有构建步骤。

在<template/>标签下只能有一个子节点元素，如果写多个如<div/>这样的标签则会报错，如下所示

"""

<template>
	<div></div>
	<div></div>
</template>
//run --> throw error
-Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

"""

.vue文件可包含html-css-js，webpack自动打包成三个文件?

在.vue文件中，dom结构可以写在<template/>标签下，而针对该dom结构的样式文件则作为<template/>标签的兄弟元素<style/>存在，同样的控制该dom结构的脚本程序写在另一个兄弟元素<script/>之中，这样一来，每个组件自己对应的结构样式都在同一个文件之中，便不会与其它的组件搞混了。

文章来源地址https://www.toymoban.com/news/detail-583216.html

vue基本操作[2] 续更----让世界感知你的存在

style标签有哪些属性?分别是什么意思?

script标签中的export default是什么意思?

可以从全文仅有的一张图中看到，<script/>标签下第一行代码是export default {……}，这是ES6新增的模块部分的语法，采用模块的方式，每个文件都自成一个模块，采用export和import来暴露和引用接口。一个文件或模块中，export 和 import可以有多个，但export default只能有一个，使用该命令之后别的模块引用时就可以不需要知道所要加载的模块变量名

export default下可以写哪些东西?

可以写很多东西，包括变量和方法，对象等，只要是想作为开放的接口都可以写，在.vue文件中一般写上data() {}以及method等,data指的是在该组件中定义的模板数据，而如果你对<template/>中的元素绑定了点击方法，如<button @click="login">，则可如下所示：

"""

<script>
export default {
  name: 'hello',
  data () {
	return {
	  msg: 'Welcome to Your Vue.js App'
	}
  },
  methods: {
		  login: function() {
			  console.log(this.username,this.password);
		  }
		}
}
</script>

"""

Vue使用方法

Vue基本使用

Vue.js是一款流行的开源JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

基本语法

1.vue的使用要从创建Vue对象开始

let vm = new Vue();

2.创建vue对象

创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员

"""

vm = new Vue({
el:"#app",
data: {},
  methods:{},
  watch:{},
  filters:{},
  })

"""

el:设置vue可以操作的html内容范围，值就是css的id选择器。

data: 保存vue.js中要显示到html页面的数据。

methods:定义函数。

watch:监听属性

filters:定义过滤器。

3.设置控制范围

vue.js要控制器的内容外围，必须先通过id来设置。

4.简单示例

"""

 <meta charset="UTF-8">
	<title>Title</title>
	<!--导入vue.js--> 
<p id="app">
   {{message}} 
</p>

"""

Vue.js的M-V-VM思想

示例：

"""

  <meta charset="UTF-8">
	<title>Title</title> 
<p id="app">
	<!-- 在双标签中显示数据要通过 {{ }} 来实现-->
	{{name}}
	</p><p>{{age}}</p>
	<!-- 在表单输入框中显示数据要使用模板语法 v-model 来完成-->
	<input type="text" v-model="name">
<p></p>

"""

要是在输入框中输入，则html中的那么对应的值也会跟着改变

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据

console.log(vm.$el) # #box vm对象可以控制的范围

console.log(vm.name); 显示name的值

也可以通过console直接修改data中的值，页面也会跟着改变

总结

1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{ }} 用法： vue对象的data属性： data:{

name:"小明",}

标签元素： {{ name }}

2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model 用法： vue对象的data属性：

data:{ name:"小明", }

表单元素：

显示数据

显示数据的一般规则：

在双标签中显示数据要通过{{ }}来完成数据显示

在表单输入框中显示数据要使用v-model来完成数据显示

输出html代码,要使用v-html来输出.v-html必须在html标签里面作为属性写出来.

示例：

"""

 <meta charset="UTF-8">
	<title></title> 
<p id="app">
	{{title}}
	{{ url1 }}
	用{{}}显示出来的html代码则会按原始字符串输出 :
	{{ img }} <br>
	以下是图片 <br>
	<span v-html="img"></span>   <br ><!--="" 在此用data中的img来显标签属性值，即就是把img原样放入span中="" --="">
</p>

"""

在输出内容到普通标签的使用{{ }}还支持js代码。

"""

{{str1.split("").reverse().join("")}}
	<!--支持js的运算符-->
	{{num1+3}}
	<!--  js还有一种运算符,三元运算符,类似于python里面的三元表达式
		三元运算符的语法:
		 判断条件 ? 条件为true : 条件为false的结果
		python 三元表达式[三目运算符]的语法:
		a if 条件 else b
	 -->
	num1和num2之间进行比较,最大值:{{ num2>num1?num2:num1 }}

"""

常用指令

指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。

在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。

指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。

因为vue的历史版本原因，所以有一部分指令都有两种写法：

"""

vue1.x写法              vue2.x的写法
v-html         ---->   {{  }}   # vue2.x 也支持v-html
v-bind:属性名   ---->   :属性
v-on:事件名     ---->   @事件名

"""

Vue数据与方法

VUE实现前端页面数据与控件的双向绑定，VUE实例中必须定义数据，以及操作数据的方法。

Vue实现使用new Vue函数创建，当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

"""

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<script>
//我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
console.log('vm.a == data.a '+(vm.a == data.a));
// 设置属性也会影响到原始数据
vm.a = 2
console.log('data.a='+data.a);
// ……反之亦然
data.a = 3
console.log('vm.a='+vm.a);
</script>
</body>
</html>

"""

vue基本操作[2] 续更----让世界感知你的存在

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性，比如：

vm.b = ‘hi’

那么对 b 的改动将不会触发任何视图的更新

使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

"""

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	  <p>{{ foo }}</p>
	  <!-- 这里的 `foo` 不会更新！ -->
	  <button v-on:click="foo = 'baz'">Change it</button>
	</div>
<script>
var obj = {
		  foo: 'bar'
		}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
</script>
</body>
</html>

"""

vue基本操作[2] 续更----让世界感知你的存在

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

"""

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

"""

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

"""

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	  <p>{{ reverseMsg }}</p>
	</div>
<script>
var obj = {
	foo: 'bar'
}
new Vue({
  el: '#app',
  data: obj,
  computed:{
	  reverseMsg:function(){
		  return this.foo.split('').reverse().join('')
	  }
  }
})
</script>
</body>
</html>

"""

vue基本操作[2] 续更----让世界感知你的存在

计算属性与VUE 方法区别

计算属性会缓存计算结果，VUE方法是每次都计算，两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

"""

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	  <p>{{ reverseMsg }}</p>
	  <p>{{ reverseMth() }}</p>
	</div>
<script>
var obj = {
	foo: 'bar'
}
new Vue({
  el: '#app',
  data: obj,
  computed:{
	  reverseMsg:function(){
		  return this.foo.split('').reverse().join('')
	  }
  },
  methods: {
	reverseMth: function () {
		return this.foo.split('').reverse().join('')
	}
  }
})
</script>
</body>
</html>

"""

vue基本操作[2] 续更----让世界感知你的存在

对应非响应依赖，计算属性只计算第一次的数值并缓存，以后发生变化也不再更新

"""

 now: function () {
			return Date.now()
	  }

"""

计算属性的 setter

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

"""

computed: {
  fullName: {
	// getter
	get: function () {
	  return this.firstName + ' ' + this.lastName
	},
	// setter
	set: function (newValue) {
	  var names = newValue.split(' ')
	  this.firstName = names[0]
	  this.lastName = names[names.length - 1]
	}
  }
}

"""

现在再运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

"""

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	  <p>{{ foo }}</p>
	  <input v-model="foo"/>
	</div>
<script>
var obj = {
	foo: 'bar'
}
new Vue({
  el: '#app',
  data: obj,
  watch: {
	  foo:function(newVal,oldVal)
	  {
		  console.log('newVal='+newVal+',oldVal='+oldVal);
	  }
  }
})
</script>
</body>
</html>

"""

vue基本操作[2] 续更----让世界感知你的存在