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/>之中，这样一来，每个组件自己对应的结构样式都在同一个文件之中，便不会与其它的组件搞混了。
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] 续更----让世界感知你的存在的更多相关文章
- 阿里云MVP：开发者的超能力，用技术创造更好世界
阿里云MVP:开发者的超能力,用技术创造更好世界 2019年3月,第8期阿里云MVP(最有价值专家)完成终审,截至目前,全球已有27个国家和地区.近500位云计算专家和优秀开发者成为阿里云MVP.阿里 ...
- 运行vue遇到的坑（续更
从Github上clone了别人的vue项目在自己电脑上运行时,出现很多错误,暂且列举下: 1.chromedriver@2.35.0安装不了的问题 正常项目clone下来,在cmd里运行: $ np ...
- [续更]一起来撸一下Flex布局里面的那些属性
Flex的全称是Flexible Box,意为弹性布局,用来为盒模型提供最大的灵活性. Flex包含的属性有很多,每个属性又包含了许多不同意义的属性值···然而在实际开发中,能被我们临幸的可能也只是那 ...
- 从0到1搭建redis6.0.7续更~
"心有所向,日复一日,必有精进" 前言: 想必大家看完我之前写的搭建redis服务器,大家都已经把redis搭建起来了吧如果没有搭建起来的小可爱请移步这里哦从0到1搭建redis6 ...
- 更轻更快的Vue.js 2.0与其他框架对比(转)
更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0 ...
- vue学习之路 - 1.初步感知
一.安装 这里使用node的npm包管理工具进行操作.操作前请先下载node. 在工程文件夹中使用以下命令安装vue: npm install vue 如下图所示:我在 helloworld 文件夹中 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- Vue.js 2.0 和 React、Augular
Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...
- VUE 与其他常见前端框架对比
对比其他框架(转官方文档) 这个页面无疑是最难编写的,但我们认为它也是非常重要的.或许你曾遇到了一些问题并且已经用其他的框架解决了.你来这里的目的是看看 Vue 是否有更好的解决方案.这也是我们在此想 ...
- vue 起步
vue 官网 目前最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”.授予了这么高的评价的vue ...
随机推荐
- 优化故事: BLOOM 模型推理
经过"九九八十一难",大模型终于炼成.下一步就是架设服务,准备开门营业了.真这么简单?恐怕未必!行百里者半九十,推理优化又是新的雄关漫道.如何进行延迟优化?如何进行成本优化 (别忘 ...
- 笔记：C++学习之旅---引用
笔记:C++学习之旅---引用 什么是引用? 引用就是别名,引用并非对象,相反的,他只是为一个已经存在的对象所起的另外一个名字. /*引用就是别名*/ #include <iostream> ...
- .Net8的快速JIT，分层编译，R2R的设置
前言 本篇通过一些简单的JIT设置,比如快速JIT,适用于循环的快速 JIT,分层编译,R2R等核心内容设置,快速进入.Net8核心区域. 概括 1.快速JIT 什么是快速JIT,顾名思义,被Rosy ...
- Ajax 以及 Ajax基于Promise封装
AJAX - 创建 XMLHttpRequest 对象 var xmlhttp = new XMLHttpRequest(); 通过打印实例对象我们发现,我们打印的是 xmlhttp 对象,里面所有的 ...
- 【Ubuntu】3.配置下载源与更新
在 Ubuntu 中,更改下载源可以加快下载速度.以下是更改 Ubuntu 下载源的步骤: 方法一: 备份之前的 sources.list 文件: sudo cp /etc/apt/sources.l ...
- 2020-09-19：TCP状态有哪些？
福哥答案2020-09-19:#福大大架构师每日一题# [答案来自此链接](https://www.zhihu.com/question/421833613) 11种状态1.CLOSED状态:初始状态 ...
- 2022-05-04：比如，str = “ayxbx“， 有以下4种切法 : a | yxbx、ay | xbx、ayx | bx、ayxb | x， 其中第1、3、4种切法符合：x和y的个数，至少在
2022-05-04:比如,str = "ayxbx", 有以下4种切法 : a | yxbx.ay | xbx.ayx | bx.ayxb | x, 其中第1.3.4种切法符合: ...
- es笔记一之es安装与介绍
本文首发于公众号:Hunter后端 原文链接:es笔记一之es安装与介绍 首先介绍一下 es,全名为 Elasticsearch,它定义上不是一种数据库,是一种搜索引擎. 我们可以把海量数据都放到 e ...
- Python pip 修改镜像源为豆瓣源
配置文件 编辑配置文件 ~/.pip/pip.conf,添加内容如下: [global] index-url = https://pypi.doubanio.com/simple trusted-ho ...
- 微软New Bing Chat AI聊天免费体验（需要魔法~）
必应聊天是什么? Bing Chat是一个AI 聊天机器人,它可以理解您问题的上下文并以人性化的方式回复.Microsoft 已将此功能直接集成到Bing 搜索中,使 Bing 成为搜索结果和AI 支 ...