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/>之中,这样一来,每个组件自己对应的结构样式都在同一个文件之中,便不会与其它的组件搞混了。

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

<style/>标签包含scoped和module属性,分别表示css作用域和css模块,一般会写上scoped属性,表示样式仅对当前组件以及其子组件的模板部分生效

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>

"""


当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时 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>

"""


计算属性

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


"""

<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 方法区别

计算属性会缓存计算结果,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>

"""


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


"""

 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] 续更----让世界感知你的存在的更多相关文章

  1. 阿里云MVP:开发者的超能力,用技术创造更好世界

    阿里云MVP:开发者的超能力,用技术创造更好世界 2019年3月,第8期阿里云MVP(最有价值专家)完成终审,截至目前,全球已有27个国家和地区.近500位云计算专家和优秀开发者成为阿里云MVP.阿里 ...

  2. 运行vue遇到的坑(续更

    从Github上clone了别人的vue项目在自己电脑上运行时,出现很多错误,暂且列举下: 1.chromedriver@2.35.0安装不了的问题 正常项目clone下来,在cmd里运行: $ np ...

  3. [续更]一起来撸一下Flex布局里面的那些属性

    Flex的全称是Flexible Box,意为弹性布局,用来为盒模型提供最大的灵活性. Flex包含的属性有很多,每个属性又包含了许多不同意义的属性值···然而在实际开发中,能被我们临幸的可能也只是那 ...

  4. 从0到1搭建redis6.0.7续更~

    "心有所向,日复一日,必有精进" 前言: 想必大家看完我之前写的搭建redis服务器,大家都已经把redis搭建起来了吧如果没有搭建起来的小可爱请移步这里哦从0到1搭建redis6 ...

  5. 更轻更快的Vue.js 2.0与其他框架对比(转)

    更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0  ...

  6. vue学习之路 - 1.初步感知

    一.安装 这里使用node的npm包管理工具进行操作.操作前请先下载node. 在工程文件夹中使用以下命令安装vue: npm install vue 如下图所示:我在 helloworld 文件夹中 ...

  7. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  8. Vue.js 2.0 和 React、Augular

    Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...

  9. VUE 与其他常见前端框架对比

    对比其他框架(转官方文档) 这个页面无疑是最难编写的,但我们认为它也是非常重要的.或许你曾遇到了一些问题并且已经用其他的框架解决了.你来这里的目的是看看 Vue 是否有更好的解决方案.这也是我们在此想 ...

  10. vue 起步

    vue 官网 目前最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”.授予了这么高的评价的vue ...

随机推荐

  1. 如何在 .NET Core WebApi 中处理 MultipartFormDataContent

    最近在对某个后端服务做 .NET Core 升级时,里面使用了多处处理 MultipartFormDataContent 相关内容的代码.这些地方从 .NET Framework 迁移到 .NET C ...

  2. 即时通讯系统为什么选择GaussDB(for Redis)?

    摘要:如果你需要一款稳定可靠的高性能企业级KV数据库,不妨试试GaussDB(for Redis). 每当网络上爆出热点新闻,混迹于各个社交媒体的小伙伴们全都开启了讨论模式.一条消息的产生是如何在群聊 ...

  3. Django笔记二十八之数据库查询优化汇总

    本文首发于公众号:Hunter后端 原文链接:Django笔记二十八之数据库查询优化汇总 这一篇笔记将从以下几个方面来介绍 Django 在查询过程中的一些优化操作,有一些是介绍如何获取 Django ...

  4. 沁恒 CH32V208(一): CH32V208WBU6 评估板上手报告和Win10环境配置

    目录 沁恒 CH32V208(一): CH32V208WBU6 评估板上手报告和Win10环境配置 CH32V208 CH32V208系列是沁恒32位RISC-V中比较新的一个系列, 基于青稞RISC ...

  5. python列表函数的基本使用

    一.列表简介 序列是Python最常见的操作,是最经常使用的一种数据操作.列表是当前序列中使用最多的. 序列中的每一个值对应的位置,称之为索引.通常情景下,第一个索引是位置为0,第二个索引位置为1.. ...

  6. 2021-02-18:给定一个字符串str,给定一个字符串类型的数组arr,出现的字符都是小写英文。arr每一个字符串,代表一张贴纸,你可以把单个字符剪开使用,目的是拼出str来。返回需要至少多少张贴纸可以完成这个任务。例子:str= "babac",arr = {"ba","c","abcd"}。a + ba + c 3 abcd + abcd 2 abcd+ba 2。所以返回2。

    2021-02-18:给定一个字符串str,给定一个字符串类型的数组arr,出现的字符都是小写英文.arr每一个字符串,代表一张贴纸,你可以把单个字符剪开使用,目的是拼出str来.返回需要至少多少张贴 ...

  7. 2021-07-05:股票问题2。给定一个数组 prices ,其中 prices[i] 是一支给定股票第 i 天的价格。设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易(多次买卖

    2021-07-05:股票问题2.给定一个数组 prices ,其中 prices[i] 是一支给定股票第 i 天的价格.设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖 ...

  8. L2-001 紧急救援 (25 分)

    1.题目描述: 作为一个城市的应急救援队伍的负责人,你有一张特殊的全国地图.在地图上显示有多个分散的城市和一些连接城市的快速道路.每个城市的救援队数量和每一条连接两个城市的快速道路长度都标在地图上.当 ...

  9. Linux运维5月2号

    了解安装VMware虚拟机  镜像文件 以及镜像文件安装过程中的设置 vmware安装步骤                                                        ...

  10. 代码随想录算法训练营Day39 动态规划

    代码随想录算法训练营 代码随想录算法训练营Day38 动态规划|62.不同路径 63. 不同路径 II 62.不同路径 题目链接:62.不同路径 一个机器人位于一个 m x n 网格的左上角 (起始点 ...