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 ...
随机推荐
- Hystrix 如何在不引入 Archaius 的前提下实现动态配置更新
Hystrix 简介 Hystrix 是 Netflix 开源的一个限流熔断降级组件,防止依赖服务发生错误后,将调用方的服务拖垮.这里对 Hystrix 本身不做过多介绍. Hystrix 目前处于维 ...
- [Pytorch框架] 1.5 Neural Networks
文章目录 Neural Networks 定义网络 损失函数 反向传播 更新权重 Neural Networks 使用torch.nn包来构建神经网络. 上一讲已经讲过了autograd,nn包依赖a ...
- 希望所有计算机学生能看到这篇c语言教程
大部分程序员走入编程世界第一个学习的语言就是C语言. 作为一门古老的编程语言,c语言拥有48年的发展历程. 为什么要学习 C语言? C语言是学习计算机程序设计语言的入门语言.最全面的编程面试网站 C语 ...
- C#自行实现安装卸载程序（不使用官方组件）
正规软件建议还是使用官方的标准安装程序组件,因为官方的标准安装/卸载组件能更好的与操作系统衔接,安装和卸载流程更加规范. 今天提供一种野路子,全用代码实现安装卸载器. 需要写一个程序,包含安装器.卸载 ...
- Vue 前端开发团队风格指南（史上最全）
Vue官网的风格指南按照优先级(依次为必要.强烈推荐.推荐.谨慎使用)分类,本文根据项目实际情况整理了一份适用于团队开发的vue风格指南,供大家参考. 一.命名规范 常用的命名规范: camelCas ...
- Selenium - 浏览器操作
Selenium - 浏览器操作 获取浏览器信息 from selenium import webdriver driver = webdriver.Chrome() driver.get(" ...
- 使用 Django 集成 vue 到一个服务器上，还是 Django 和 vue 分开部署
Django+Vue 的项目,实际部署的时候,使用 Django 集成 vue 到一个服务器上,还是 Django 和 vue 分开部署? 目前在架构选择,基本上定了 Django + Vue 但是实 ...
- AI 绘画 - 如何 0 成本在线体验 AI 绘画的魅力
要想体验 AI 绘画,比较流行的三种方式是 Midjourney.OpenAI 的 DALL·E 2 以及 Stable Diffusion.而 Midjourney 已经停止免费试用,且使用价格不太 ...
- 在程序里如何停止整个python项目的运行
我们的项目无可避免的会遇到一些场景,当出现某个故障或者异常,必须停止整个项目的运行,这时只需要在抛出的异常里执行以下即可: os._exit(0)
- vue CLI 4 创建项目fetchMetadata资源拉取过慢解决方法
最近将vue cli 升级到了 v4.0.5 创建项目的时候发现慢得想个蜗牛 仔细看这个日志会发现,mapToRegistry uri 是 taobao 这个一拉就是半天,还指不定那个时候就卡死在那里 ...