一、vue指令v-for
- 准备vue对象，data数据
<script>
new Vue({
el:"#lr",
data:{
likes:["唱","跳","rap"],
user:{
username:"用户",
password:"123456",
age:18
},
students:[
{"name":"小明","age":18,"like":"篮球"},
{"name":"小花","age":28,"like":"乒乓球"},
{"name":"小白","age":38,"like":"羽毛球"},
{"name":"小灰","age":48,"like":"rap"}
]
}
});
- 遍历数组 （元素 in 数据源）
<h1 v-for="like in likes">{{like}}</h1>
- 遍历数组加上索引 （元素 in 数据源）
注意和参数名字无关，遍历的顺序是一定的，前面是值，后面是索引
<h1 v-for="(index,like) in likes">{{index}}----{{like}}</h1>
- 遍历普通对象
第一个参数是对象属性的值
第二个参数是对象属性
第三个是索引
<ul v-for="(value,property,index) in user">
{{property}}=={{value}}=={{index}}
</ul>
- 遍历对象集合 填充表格数据
<table>
<thead>
<tr>姓名</tr>
<tr>年龄</tr>
<tr>爱好</tr>
</thead>
<!--遍历data中的数据
这个数据以后应该是在后台拿的，这里是测试数据
-->
<thead v-for="student in students">
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td>{{student.like}}</td>
</thead>
</table>
测试效果
二、vue指令v-show
语法
<标签名 v-show=“表达式”></标签名>
当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
会在标签的css中添加 display: none :
标签的值会自动转换为boolean类型的值
- v-show=""中可以直接是true或者false
- 可以是data的属性值
- 可以是一个表达式的批判结果 布尔值
<div id="lr">
<!--v-show=""中可以直接是true或者false-->
<div style="color: peachpuff" v-show="true">
我是谁
</div>
<!--也可以是属性-->
<div style="color: green" v-show="showDiv">
你好
</div>
<!--可以是一个表达式的批判结果 布尔值 -->
<div style="color: aqua" v-show="90<5">
wcnm
</div>
</div>
<script>
new Vue({
el:"#lr",
data:{
/*以后可以是后台的数据判断的结果
* 不能加引号，不是字符串
* */
showDiv:true
}
});
三、v-bind指令
为一个标签属性绑定一个值
注意不能直接引号""取属性值，需要绑定标签的属性再从data中取值，比如赋值给img标签的src
<标签 v-bind:标签属性名字=“表达式”></标签>
简写形式 省去v-bind :
<标签 :标签属性名字=“表达式”></标签>
为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind=“对象”></标签>
<div id="lrtest">
<!--第一种方式-->
<img v-bind:src="img" v-bind:title="imgtitle" >
<!--第二种方式-->
<img :src="img" :title="imgtitle">
<!--注意：第三种方式将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字-->
<img v-bind="property">
</div>
<script>
new Vue({
el:"#lrtest",
data:{
img:"./img/1.jpg",
imgtitle:"药水哥",
property:{
src:"./img/1.jpg",
title:"水儿"
}
}
});
</script>
四、v-on指令
使用v-on指令注册事件
<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>
第一种：事件可以直接绑定一个表达式，比如赋值：num++
第二种：事件处理函数，绑定函数…可以直接是方法名字，
也可以方法名加上（）表示当场调用，并且还可以传入参数
简写方式语法
<标签 @事件句柄=“表达式或者事件处理函数”></标签>
事件处理函数作为事件句柄的值不需要调用
<div id="lrtest">
<h1>num的值：：{{num}}</h1>
<!--表达式-->
<button v-on:click="num++">增加。。</button>
<!--绑定函数-->
<button v-on:click="add">增加。。</button>
<!-- 内联事件:回调函数名(参数列表)
直接调用，并且传入参数
-->
<button @click="eat('西瓜')">内联函数。。传参</button>
</div>
<script>
new Vue({
el:"#lrtest",
data:{
num:0
},
methods:{
add(){
this.num++;
},
eat(food){
alert("我想吃"+food)
}
}
});
</script>
五、计算属性computed
计算属性就是要操作对象的属性，改变为想要的结果，比如一个字符串的操作，
一个时间戳格式化的操作，如果都在data中取值，在标签中操作数据，非常不方便，
使用计算属性简化页面
<div id="lrtest">
<!--直接在标签中处理数据 臃肿-->
<h1>今天是：{{
new Date(birthday).getFullYear() + '-'+ (new Date(birthday).getMonth()+1)+ '-' + new Date(birthday).getDate()
}}
</h1>
<h1>今天是：{{today}}
</h1>
</div>
<script>
/*获取当前时间戳*/
var myDate = new Date().getTime();
new Vue({
el:"#lrtest",
data:{
birthday:1564233283355
},
computed:{
today(){
return new Date(myDate).getFullYear() + '-'+ (new Date(myDate).getMonth()+1)+ '-' + new Date(myDate).getDate()
}
}
});
</script>
六、watch监控数据
watch可以让我们监控一个值的变化
v-model绑定的属性名，监控方法的名字都要和这个属性的名字一样不然监控不了
监控的方法中可以传入两个参数，新值，旧值
<div id="app">
<input type="text" v-model="message">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:""
},
watch:{
message2(newVal, oldVal){
console.log(newVal, oldVal);
}
}
})
</script>
七、vue的全局组件
组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.vue中所有的都是组件
- 不管是全局组件还是局部组件 都是组件名和配置对象
全局变量是 （组件名，配置对象{template：“代码”}）
局部变量是 （组件名：配置对象） - 定义方式：Vue.component(“自定义标签的名字”,{配置对象})
配置对象中有一个template，自定义组件要在vue挂载的块级元素使用 - 全局组件可以在其他所有挂载标签中使用,定义在vue对象之外，一个一个的定义
局部组件，定义在vue对象内部components，可以一次定义几个 - template中的html必须在一个标签中. 仅且只能有一个根节点
<div id="app">
<myhtm1></myhtm1>
<myhtm2></myhtm2>
</div>
<h1>====================================================================</h1>
<div id="app2">
<myhtm1></myhtm1>
<myhtm2></myhtm2>
</div>
<!--在外面不能使用，只有在挂载标签中使用-->
<myhtm2></myhtm2>
<script type="text/javascript">
Vue.component("myhtm1",{
template:"<div style='color: aquamarine' >我是自定义组件11111</div>"
})
/* 配置对象定义在外面*/
var myConfig={
template:"<div style='color: peachpuff' >我是自定义组件222222</div>"
}
Vue.component("myhtm2",myConfig)
new Vue({
el:"#app"
})
new Vue({
el:"#app2"
})
</script>
全局组件都能使用
八、局部组件
定义在vue对象的内部，只有该vue对象挂载的块级元素范围内可以使用
在components属性中定义
语法：
var app = new Vue({
el: "#app",
data: {},
components : {
"局部组件的名字1" : {组件的配置对象}
"局部组件的名字2" : {组件的配置对象}
}
测试
<div id="app">
<myhtm1></myhtm1>
<myhtm2></myhtm2>
<myhtm3></myhtm3>
</div>
<h1>====================================================================</h1>
<div id="app2">
<myhtm1></myhtm1>
<myhtm2></myhtm2>
<myhtm3></myhtm3>
</div>
<myhtm2></myhtm2>
<script type="text/javascript">
//局部组件只能够在所挂载的标签中使用
// 在局部组件的绑定标签之外使用直接报错
Vue.component("myhtm1",{
template:"<div style='color: aquamarine' >我是全局组件11111</div>"
})
new Vue({
el:"#app",
components:{
"myhtm2":{
template:"<div style='color: aquamarine' >我是app中的局部组件22222</div>"
},
"myhtm3":{
template:"<div style='color: grey' >我是app中的局部组件33333</div>"
}
}
})
new Vue({
el:"#app2"
})
</script>
报错
九、组件使用两种HTML模板
组件_template模板的代码组织方式
1 直接在template属性写上html代码字符串或者变量指定 需要在js中拼接html代码段
2 把template的代码块(本身就是html)写到html
1)定义 template script 加了以后就不会再页面直接显示,而是给别人引入,所以要加id
2)引用 #Id
如果模板代码太多,导致当前html代码太多
3 外部js存放,导入进来使用
<template id="mytemplate1">
<h3 onclick='javascript:alert(`我是组件222222`)' style='color: pink'>我是组件2222</h3>
</template>
<script id="mytemplate2" type="text/template">
<h3 onclick='javascript:alert(`我是组件222222`)' style='color: pink'>我是组件2222{{name}}{{test}}</h3>
</script>
<div id="lrtest">
<myhtml></myhtml>
<myhtml2></myhtml2>
<myhtml3></myhtml3>
</div>
<script>
var tmplateStr = "<h3 style='color: aquamarine' onclick='javascript:alert(`我是组件模板1`)' >我是组件111111</h3>"
var componentConfig = {
"template":tmplateStr
}
new Vue({
el:"#lrtest",
components:{
"myhtml":componentConfig,
"myhtml2":{
/*通过id引用页面中的模板*/
"template":"#mytemplate1",
//"template":"#mytemplate2",
/*模板中如果要使用数据，必须用函数返回*/
data(){
return {
name:"组件2",
test:"组件2"
}
}
},
//es6语法 在浏览器中不能直接运行
"myhtml3":() => import("./js/myhtml3.js")
}
})
- 第一种方式 在自定义组件template属性直接写html代码字符串 或者 定义一个字符串变量来引用当作模板 ，使用的时候在组件中调用，缺点如果代码太多需要拼接
- 第二种方式，引用页面中的标签 或者script 写好的HTML当作模板 通过id引用
- 第三种方式，外部引入 es6的语法不能直接运行
js中拼接html代码段
十、路由
- 安装路由
- 在当前项目下执行命令
3. 然后查看package.json查看是否安装成功
使用步骤
- 头部引入路由
- js中
- 启用路由功能: Vue.use(VueRouter)
- 定义路由对象：var router = new VueRouter({routes:[{},{}]})
- 定义组件;自定义组件的方式
- 将自定义组件绑定到路由对象：{
routes路由资源，是一个数组可以绑定多个组件
每个route都有path（路径）和component（组件）属性
代表了路径和这个路径的组件，然后渲染到页面中的router-view
} - 将路由对象绑定到vue对象 并且只能在vue对象绑定的块级区域内才可以使用这个绑定的路由
<div id="lrtest">
<!-- 路由的功能已经实现了 这里只是方便跳转看到效果 访问产品的路径 -->
<router-link to="/product" >产品介绍</router-link>
<!--访问关于我们的路径-->
<router-link to="/about" >关于我们</router-link>
<!--路由的路径资源渲染的页面-->
<router-view></router-view>
</div>
<script>
/*启用路由*/
Vue.use(VueRouter)
/*定义组件*/
var index = Vue.component("index",{
template:"<h3 style='color: greenyellow'>这是首页</h3>"
})
var product = Vue.component("product",{
template:"<h3 style='color: greenyellow'>产品介绍</h3>"
})
var about = Vue.component("about",{
template:"<h3 style='color: greenyellow'>这是关于我们</h3>"
})
var router = new VueRouter({
/*路由资源，是一个数组*/
routes:[{
/*路由访问的路径*/
path:"/",
/*路由的组件
* 自定义标签
* */
component:index
},{
path:"/product",
component:product
}, {
path:"/about",
component:about
}]
})
new Vue({
el:"#lrtest",
/*如果是router默认名字，可以只写router*/
router:router
})
</script>
十一、webpack打包
- 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
- 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
- 将代码打包的同时进行混淆，提高代码的安全性。
- Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析，然后将这些模块按照指定的规则生成对应的静态资源。
创建web项目
进入这个项目初始化项目
npm init -y
相当于创建了一个maven项目
- 安装webpack
全局安装：
npm install -g webpack
npm install -g webpack-cli
- a.js文件
var a = "a模块";
var b = require("./b.js")
console.log(a+"00000000000000000000");
console.log(b);
- b.js文件
define(function () {
var b = "b模块";
return b
});
require导入 define导出
是从当前项目下开始的路径，比如项目的src文件夹下面的a.js 并且会把a,js的依赖b.js一起打包到项目下的xx文件夹下的xx.js
指定到项目下的dist文件夹，命名规范bundle.js
terminal中输入打包指令：webpack src/a.js -o dist/bundle.js
- 新建测试index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="dist/bundle.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./css/index.css">-->
</head>
<body>
<div>打包测试</div>
<div>打包测试</div>
<div>打包测试</div>
</body>
</html>
查看结构变化
打包文件导入成功：
快捷方式，指令只需要执行webpack就可以
新建webpack.config.js ，该文件与项目根处于同级目录
var path = require("path");
module.exports = {
//要打包的文件处于项目的相对路径
entry: './src/a.js',
//打包到哪个地方
output: {
打包到项目的dist文件夹下
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
}
- 以上都是打包js，如何打包css
- 使用各种加载器
webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。
比如：需要打包css就需要css的loader
loader 通过在 require() 语句中使用 loadername! 前缀来激活，或者通过 webpack 配置中的正则表达式来自动应用 -
传统引入css方式是
但是只要将需要打包的css样式引入到需要打包的bundle.js文件中，一起打包
然后使用的时候在页面引入就可以使用打包的资源
先下载需要的插件
npm install style-loader --save-dev
npm install css-loader --save-dev
然后在webpack.config.js加入一个module
var path = require("path");
module.exports = {
entry: './src/a.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/, //匹配文件规则
use: ['style-loader', 'css-loader'] //匹配后使用什么加载器进行模块加载
// webpack use的配置，是从右到左进行加载的
},
]
}
}
十二、热更新web服务器
案例中，每次修改任何js或css内容，都必须重新打包，非常麻烦,而且都是本地运行。webpack给我们提供了一个插件，可以帮我们运行一个web服务，加载页面内容，并且修改js后不需要重新加载就能看到最新结果
1）安装插件：npm install webpack-dev-server --save-dev
2）添加启动脚本
在package.json中配置script
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
}
–inline：自动刷新
–hot：热加载
–port：指定端口
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1
然后执行指令npm run dev
如果报错：
错误
推荐帖子https://www.cnblogs.com/gqx-html/p/10756388.html
https://www.cnblogs.com/laraLee/p/9174383.html
如果配置成功，可以访问服务器
http://localhost:8080/index.html
测试手动搭建打包环境很麻烦，开发的时候
需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。
幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli
934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
