VUE重修01
---恢复内容开始---
1、框架与库的区别
前端框架与库的区别?
jquery 库 -> DOM(操作DOM) + 请求
art-template 库 -> 模板引擎
框架 = 全方位功能齐全
简易的DOM体验 + 发请求 + 模板引擎 + 路由功能
KFC的世界里,库就是一个小套餐, 框架就是全家桶
代码上的不同
一般使用库的代码，是调用某个函数，我们自己把控库的代码
一般使用框架，其框架在帮我们运行我们编写好的代码
框架: 初始化自身的一些行为
执行你所编写的代码
施放一些资源
2、vue使用npm下载完成后，其文件夹下会有几个不同后缀的文件：
1)vue.common.js是以commomjs为规范的文件
2）vue.esm.browser.js则是es6为标准的commonjs文件
3）vue.esm.js 是以es6为标准的
3.vue的基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./node_modules/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"> </div>
</body>
<script>
new Vue({
el:'#app',//目的地
template:'<div>{{msg}}</div>',//只允许一个根标签,没有的话默认加载app根元素
data(){
return{
msg:'hello'
}//数据驱动视图，在vue实例对象
}
})
//插值模板语法:双花括号
</script>
</html>
花括号中允许插入对象，字符串，布尔值，三元表达式，对象要在花括号外加空格
隔开
4、指令：
在vue中提供了一些对于页面+数据更方便的输出，这些操作被称为指令
以v-xxx表示，封装了一些DOM行为
v-text/v-html:渲染相应的文本/模板内容
v-if/v-show：销毁或创建元素/隐藏或显示元素
v-if可与v-else搭配使用
v-for循环
v-for='（item,index） in menuLists' //item是值的每一项.index是数组的索引
v-bind 为元素的属性绑定值，主要实现的是单向数据绑定
:属性=‘data变量’
v-on绑定事件，简写@
v-model:双向数据绑定语法糖，但仅能在表单元素内绑定
尝试用vue内部实现：
5、局部组件
1）局部组件可以使用以下方式进行声明
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./node_modules/vue/dist/vue.js"></script>
<title>Document</title>
</head> <body>
<div id="app"> </div>
</body>
<script>
//局部组件：声子，挂子，用子
let App={//组件名称首字母必须大写
template:'<div>entry{{msg2}}</div>',
data(){
return {
msg2:'ok啦'
}//必须使用函数返回一个对象
}
}
new Vue({
el: '#app',//目的地
template: '<App />',//这里的标签可以是单闭合
data() {
return {
msg: 'hello'
}
},
components: {
App
}
})
//插值模板语法:双花括号
</script> </html>
4、全局组件
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./node_modules/vue/dist/vue.js"></script>
<title>Document</title>
</head> <body>
<div id="app"> </div>
</body>
<script>
//全局组件
Vue.component('Vbtn',{//挂载到了vue的实例上,该实例的子组件
//也可以使用这个全局组件
template:'<button>hello</button>'
})
new Vue({
el: '#app',//目的地
template: '<Vbtn />',//这里的标签可以是单闭合
data() {
return {
msg: 'hello'
}
},
components: {
//不需要挂载Vbtn,已经挂载好了
}
})
//插值模板语法:双花括号
</script> </html>
VUE重修01的更多相关文章
- vue学习01
vue学习01 1. 创建一个Vue实例官网-学习-教程-安装-(开发/生产版本)-与jQuery的引用相似 <!DOCTYPE html> <html> <head ...
- vue 2.0-1
vue 2.0 开发实践总结之疑难篇 续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1. vue 组件的说明和使用 2. vuex在实 ...
- vue基础01
事件 事件绑定 在vue中,事件绑定用v-on.v-on也可以用@click=""形式 实例1: <div class="container" id=&q ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- Vue-router重修01
---恢复内容开始--- 1.在vue中获取dom vue中不建议您亲自进行dom操作 vue实例内置ref属性存储或获取相应的dom元素 <div ref="dv"> ...
- Vue重修02
1.v-for的优先级比v-if/v-show都大 v-bind也可以绑定自定义的属性 2.父组件向子组件传值 <!DOCTYPE html> <html lang="en ...
- React对比Vue（01 数据的定义，使用，组件的写法，目录结构等）
1.脚手架对比 两个都需要安装node node自带npm 然后安装cnpm yarn(有时候 npm会丢包,所以) npm install -g cnpm --registry=https://re ...
- vue总结 01基础特性
最近有时间来总结一下vue的知识: 一.vue.js 被定义成一个开发web界面的前端库,是一个非常轻量的工具.vue.js本身具有响应式和组件化的特点. 我们不需要在维护视图和数据的统一上花费大量的 ...
- VUE 入门 01
什么是VUE? 它是构建用户界面的JavaScript框架(让他自动生成js.css.html) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vu ...
随机推荐
- DirectX11 With Windows SDK--14 深度测试
前言 当使用加法/减法/乘法颜色混合,或者使用透明混合的时候,在经过深度测试时可能会引发一些问题.例如现在我们需要使用加法混合来绘制一系列对象,而这些对象彼此之间不会相互阻挡.若我们仍使用原来的深度测 ...
- RMQ（ST表）
#include<iostream> #include<cstdio> #include<cmath> using namespace std; int N, M, ...
- .NET面试题系列（十六）数据库面试题
数据库事务的四大特性 原子性(Atomicity) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚.因此事务的操作如果成功就必须要完全应用到数据库,如果操作失败则不能对数据库有任何影响. ...
- Hive_1
Sqoop实现Hbase和关系型数据库的数据互导 Zookeeper 配置的更新,文件的命名 Hive是建立在Hadoop之上为了减少MapReduce jobs编写工作的批处理系统,HBase是为了 ...
- 第三章 Java的基础程序设计结构
一个简单的 Java 应用程序 访问修饰符 public,private,protected main 方法必须时public修饰的,C#则不必须 数据类型 可以用16进制表示浮点数 可以用2,8,1 ...
- MySql的事务控制（TCL语言）
⒈事务 一个或一组sql语句组成一个执行单元,这个执行单元要么全部执行,要么全部不执行. ⒉事务的特性(ACID) 1.原子性(Atomicity):一个事务不可再分割,要么都执行要么都不执行. 2. ...
- mysql 客户端连接报错Illegal mix of collations for operation
服务端用的是utf-8,客户端工具打开表和视图是会报Illegal mix of collations for operation错误,经排查,可以采用以下语句解决 SET character_set ...
- Windows密钥容器和证书的关系
其实CSP主要是对容器里的密钥对操作的,和证书关系不大. 容器里的密钥对有两种类型:一种是AT_KEYEXCHANGE,表示加密的密钥对,一种是AT_SIGNATURE表示签名的密钥对. 由于美国的出 ...
- Python-Django-Ajax
什么是Ajax: 通过js语言跟后台进行交互的一个东西 -特点:异步,局部刷新 ajax往后台提交数据 $.ajax({ url:'请求的地址', type:'get/post', data:{key ...
- Python——plot可视化数据，作业8（python programming）
subject1k和subject1v的形状相同 # -*- coding: utf-8 -*- import scipy.io as sio raw_K = sio.loadmat('Subject ...