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 ...
随机推荐
- smarTTY总是失败连接的原因
首先用命令 IP addr 查看是否ip 地址错误 事实证明就是因为我的ip地址发生了变化所以导致连接不上, 不过有一次,我将电脑重启 也是连接上了的.
- AdminLTE 前端框架
适合运维平台 后台管理系统 AdminLTE 是一个开源的后台控制面板和仪表盘 WebApp 模板. 这是一个快速的HTML模板,基于CSS框架的引导. 文档: http://adminlte.la ...
- 利用Python实现“指尖陀螺”，让你释放压力
前言 利用Python实现“指尖陀螺”,让你释放压力 基本环境配置 版本:Python3 系统:Windows 相关模块:turtle 实现效果 不停点击键盘空格键,这个陀螺会慢慢加速,从而达到一个减 ...
- jquery的show()和hide()方法
显示和隐藏元素的方法 相当于CSS中的display属性 show()方法,相当于display:block hide()方法,相当于display:none
- 原型链上的call方法集合
1. Object.prototype.toString.call(value) // 返回数据的类型 // "[object Object]" 等 2. Array.protot ...
- vscode git設置
1.git官网https://git-scm.com/download/win 链接下载:64-bit Git for Windows Setup,不要下载Portable,体积太大了: 如果git官 ...
- maven（win10）配置完环境变量后无法识别mvn -v命令
第一步:http://maven.apache.org/download.cgi官网下载 第二步:把压缩包解压缩到不含中文和空格的目录下 第三步:新建MAVEN_HOME环境变量,值为maven解压缩 ...
- Jenkins+PowerShell持续集成环境搭建(五)SSRS项目
部署SSRS项目的原理是使用ReportingService2005类的方法实现rdl文件上传等功能. 上传rdl文件的脚本示例: $username="Victor"; $pas ...
- Atcoder Beginner Contest 118 C-Monsters Battle Royale(贪心)
题目链接 题意就是要让给出的数字去互相取余,看看能得到最小的数事多少. 那么就可以从小到大排序,每一次都贪心地把最小的数作为攻击者,去攻击其他的数字(也就是大的取余小的),然后再一次排序,循环这个过程 ...
- Nginx Epoll事件模型优劣
L30-31 Epoll 性能优势主要源于它不用遍历 假设有100万个链接 其它事件可能都需要遍历所有链接,而Epoll只要遍历活跃的链接,这样大大提升了效率