Vue学习（4）
昨天内容回顾
1.{{}}模板语法、插值、简单运算
2.指令系统
v-if 真正销毁重建
v-show 更改css的display，用于重复切换出现
v-bind 绑定属性 ：
v-on 绑定事件 @
v-for 遍历，优先级相对高
v-html 解析html标签
v-model 只适用于在表单控件 双向数据绑定的一个体现
双向数据绑定=单向数据绑定+UI监听
网站设计一共有23中模式
最常使用使用的三种：
MVC MVVM MTV
MVVM
Model View ViewModel
流程控制
3.computed计算属性
默认值有getter
网页音乐播放
1.用事件控制的写法
<!DOCTYPE html>
<html>
<head> <title></title>
<style>
*{
padding: 0;
/* margin: 0; */
}
ul{
list-style:none;
}
li{
border-bottom: 1px solid gray;
}
</style> </head>
<body>
<div id="music">
<audio :src='song' autoplay="" controls="" @ended="next" ></audio>
<ul>
<li v-for='(item,index) in songs' @click='huange(index)'>
<h3>歌名：{{item.name}}</h3>
<p>歌手：{{item.author}}</p>
</li>
</ul>
</div> <script src="vue.js"></script>
<script>
var songs = [
{id:1,src:"./audio/1.mp3",name:"111",author:"111111"},
{id:2,src:"./audio/2.mp3",name:"112",author:"211111"},
{id:3,src:"./audio/3.mp3",name:"113",author:"311111"},
{id:4,src:"./audio/4.mp3",name:"114",author:"411111"}
];
var music=new Vue({
el:'#music',
data:{
song:"./audio/1.mp3",
songindex:0,
songs:songs,
},
methods:{
huange(index){
this.song=this.songs[index].src;
},
next(){
this.songindex++;
this.song=this.songs[this.songindex].src;
},
},
computed:{ },
create(){
//页面初始化
}
}) </script> </body>
</html>
2.用计算属性的写法（方便推荐）
<!DOCTYPE html>
<html>
<head> <title></title>
<style>
*{
padding: 0;
/* margin: 0; */
}
ul{
list-style:none;
}
li{
border-bottom: 1px solid gray;
}
</style> </head>
<body>
<div id="music">
<audio :src='currSong' autoplay="" controls="" @ended="next" ></audio>
<ul>
<li v-for='(item,index) in songs' @click='huange(index)'>
<h3>歌名：{{item.name}}</h3>
<p>歌手：{{item.author}}</p>
</li>
</ul>
</div> <script src="vue.js"></script>
<script>
var songs = [
{id:1,src:"./audio/1.mp3",name:"111",author:"111111"},
{id:2,src:"./audio/2.mp3",name:"112",author:"211111"},
{id:3,src:"./audio/3.mp3",name:"113",author:"311111"},
{id:4,src:"./audio/4.mp3",name:"114",author:"411111"}
];
var music=new Vue({
el:'#music',
data:{ songindex:0,
songs:songs,
},
methods:{
huange(index){
this.songindex=index;
},
next(){
this.songindex++;
//this.song=this.songs[this.songindex].src;
},
},
computed:{
currSong(){
return this.songs[this.songindex].src;
} },
create(){
//页面初始化
}
}) </script> </body>
</html>
组件创建
<!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">
<title>Document</title>
</head>
<body>
<div id="app">
<Vheader></Vheader>
<Vheader></Vheader>
<Vheader></Vheader>
</div> <script src="vue.js"></script>
<script>
//组件的创建
Vue.component('Vheader',{
//data一定是函数，必须要有个返回值
data:function(){
return{
//必须要return一个对象，哪怕是一个空的对象，不然就报错。
}
},
template:`<div class="header">
<div class="w">
<div class="w-l">
<img src="./mei.jpg"/>
</div>
<div class="w-r">
<button>登录</button><button>注册</button> </div>
</div>
</div>`
}) var app=new Vue({
el:"#app",
data:{ },
methods:{ },
computed:{ }, })
</script>
</body>
</html>
vue-cli项目生成
安装vue-cli
打开cmd，执行cnpm install -g vue-cli
安装完毕后，执行vue -V查看是否安装成功，如果输出版本号则成功。
查看官方模板
在cmd下，执行 vue list
新建项目
在cmd下切换到指定目录，然后执行 vue init webpack-simple demo（demo是自定义的项目名）
然后按回车，按回车，直到让选是不是user sass？选择N，因为现在还不会sass
然后如图中所提示的执行：
cd demo
npm install
npm run dev
浏览器访问：http://localhost:8080/即可看到vue界面
模板中组件的使用1
使用vs-code编辑vue文件，需要安装扩展Vetur，在编辑器左侧中找。
一个vue文件就是一个组件，重写App.vue
<!--一个组件有三个部分组成--> <template>
<!-- 页面的结构 -->
<div class="app">
<h3>{{msg}}</h3>
</div>
</template> <script>
//页面的业务逻辑
export default{
name:'App',
data(){
return{
msg:'hello 组件！'
}
}
}
</script> <style>
</style>
组件的使用2
1.在项目目录下新建组件目录components，在目录下新建三个组件文件：Vheader.vue，Vcontent.vue，Vfooter.vue。
<template>
<header class="nav">
我是header
<h3>头</h3>
</header>
</template> <script>
export default {
name:'Vheader',
data(){
return{ }
}
}
</script>
<style scoped>
h3{
color: red;
}
</style>
Vheader.vue
<template>
<div class="wrap">
我是中心内容区域
<h3>头</h3>
</div>
</template> <script>
export default {
name:'Vcontent',
data(){
return{ }
}
}
</script>
<style scoped>
h3{
color: yellow;
}
</style>
Vcontent.vue
<template>
<footer class="toot">
我是footer
<h3>头</h3>
</footer>
</template> <script>
export default {
name:'Vfooter',
data(){
return{ }
}
}
</script>
<style scoped>
h3{
color: blue;
}
</style>
Vfooter.vue
2.在App.vue下引用：
<!--一个组件有三个部分组成--> <template>
<!-- 页面的结构 -->
<div class="app">
<h3>{{msg}}</h3>
<Vheader></Vheader>
<vcontent></vcontent>
<vfooter></vfooter> </div>
</template> <script>
//1.先引入子组件
import Vheader from '../components/Vheader.vue'
import Vcontent from '../components/Vcontent'
import Vfooter from '../components/Vfooter' //页面的业务逻辑
export default{
name:'App',
data(){
return{
msg:'hello 组件！'
}
},
methodes:{},
computed:{},
//2.挂载
components:{
Vheader,
Vcontent,
Vfooter,
},
}
</script> <style>
</style>
App.vue
总结
webpack+node.js将我们的项目更加方便化。
更有助于开发者快速开发。
创建组件
1.cd 到当前目录下
2.vue init webpack-simple 项目名
3.接下来根据提示操作
4.cd 项目名
5.npm install
6.npm run dev
7.只关心src下的文件夹里面的文件
Vue学习（4）的更多相关文章
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue学习第一篇 hello world
计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- vue学习笔记（二）——简单的介绍以及安装
学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue学习2：模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- k8s授权访问
#监听本地的8080端口 kubectl proxy --port=8080 [root@k8s-m ~]# kubectl proxy --port=8080Starting to serve o ...
- 老男孩python学习自修第二十一天【socket】
1. 使用python编写一个静态的web服务器,能够处理静态页面的http请求 原理: a. 使用socket进行服务端和浏览器之间的通信 b. 使用多线程处理多个客户端浏览器的请求 c. 解析用户 ...
- essential-phone的相关体验
一.adb环境配置 1.下载adb工具 工具网上一搜一大把,注意路径不能有中文. 2.系统配置环境变量 找到环境变量,点击新建.变量名根据自己的习惯随便建,变量值为下载的adb工具解压后存放的路径. ...
- Visual Studio 2017 and Swagger: Building and Documenting Web APIs
Swagger是一种与技术无关的标准,允许发现REST API,为任何软件提供了一种识别REST API功能的方法. 这比看起来更重要:这是一个改变游戏技术的方式,就像Web服务描述语言一样WSDL( ...
- hdu-4763(kmp+拓展kmp）
题意:给你一个串,问你满足最大字串既是前后缀,也在字符串除去前后缀的位置中出现过: 思路:我用的是拓展kmp求的前后缀,只用kmp也能解,在字符串2/3的位置后开始遍历,如果用一个maxx保存前2/3 ...
- 彻底弄懂 HTTP 缓存机制及原理 | 干货
来源:www.cnblogs.com/chenqf/p/6386163.html 前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个 ...
- DRF 版本 认证
DRF的版本 版本控制是做什么用的, 我们为什么要用 首先我们要知道我们的版本是干嘛用的呢大家都知道我们开发项目是有多个版本的 当我们项目越来越更新~版本就越来越多我们不可能新的版本出了~以前旧的版本 ...
- 解决vscode egg调试出现： this socket has been ended by other party【转】
如果是最新的1.22 方案一 回退版本到1.21.1 https://code.visualstudio.com/updates/v1_21 方案二 退而求其次, 更改debug配置, 待官方或egg ...
- 高仿Readhub小程序 微信小程序项目【原】
# News #### 项目介绍微信小程序项目涉及功能 https://gitee.com/richard1015/News https://github.com/richard1015/News 高 ...
- C# 获取变量或对象的栈与堆地址
C# 获取变量或对象的栈与堆地址 来源 https://www.cnblogs.com/xiaoyaodijun/p/6605070.html using System; using System.C ...