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 ...
随机推荐
- Java中 VO、 PO、DO、DTO、 BO、 QO、DAO、POJO的概念(转)
PO(persistant object) 持久对象 在 o/r 映射的时候出现的概念,如果没有 o/r 映射,没有这个概念存在了.通常对应数据模型 ( 数据库 ), 本身还有部分业务逻辑的处理.可以 ...
- 【纪录】Hash about
backup a easy implement # coding: utf-8 def add(k, v): pass def get(target): pass class LinearMap(ob ...
- Golang的select多路复用以及channel使用实践
看到有个例子实现了一个类似于核弹发射装置,在发射之前还是需要随时能输入终止发射. 这里就可以用到cahnnel 配合select 实现多路复用. select的写法用法有点像switch.但是和swi ...
- jackson使用问题:mapper.readValue()将JSON字符串转反序列化为对象失败或异常
问题根源:转化目标实体类的属性要与被转JSON字符串总的字段 一 一对应!字符串里可以少字段,但绝对不能多字段. 先附上我这段出现了问题的源码: // 1.接收并转化相应的参数.需要在pom.xml中 ...
- static关键字的用法
静态变量和静态方法 static关键字的基本用法: 1.修饰变量:被static修饰的变量属于类变量,可以用类名.变量名来引用,而不用直接new一个对象来引用. 2.修饰方法:被static修饰的方法 ...
- Microsoft Azure Tutorial: Build your first movie inventory web app with just a few lines of code
Editor’s Note: The following is a guest post from Mustafa Mahmutović, a Microsoft Student Partner wh ...
- Ajax 调用的WCF
支持ajax 跨域调用的WCF搭建 1.新建一个"ASP.NET空Web应用程序"项目. 2.新建一个“WCF服务(支持ajax)”. 3.修改WCFAjaxService.svc ...
- java代码自动下载Spring Boot用户手册
本示例演示Spring Boot 1.5.9.RELEASE版本的用户手册下载 pom.xml <?xml version="1.0" encoding="UTF- ...
- JVM深入理解<二>
以下内容来自: http://www.jianshu.com/p/ac7760655d9d JVM相关知识详解 一.Java虚拟机指令集 Java虚拟机指令由一个字节长度的.代表某种特定含义的操作码( ...
- PHP——运行shell命令|脚本
内置函数 PHP | 系统程序执行 exec shell_exec passthru system 配置 打开php.ini配置文件,并从disable_function将用到的函数从禁用中删除,然后 ...