文章目录
1 vue重要指令
1.1 v-model
- 主要是用于完成双向的绑定
- 只能用于:input,select,textarea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
用户名：<input type="text" v-model="usernameVal" />{{usernameVal}}<br/>
爱好:
<input type="checkbox" value="1" v-model="hobbyVal"> 吃饭
<input type="checkbox" value="2" v-model="hobbyVal"> 睡觉
<input type="checkbox" value="3" v-model="hobbyVal"> 打保罗
{{hobbyVal}} <br />
性别:
<input type="radio" value="1" v-model="sexVal"> 男
<input type="radio" value="2" v-model="sexVal"> 女
{{sexVal}}
<br />
城市:<select v-model="cityVal">
<option value="1">成都</option>
<option value="2">绵阳</option>
<option value="3">重庆</option>
</select>
{{cityVal}} <br />
简历:<textarea v-model="introVal"></textarea>
{{introVal}} <br />
</div>
<script>
new Vue({
el:"#app",
data:{
usernameVal:"皮皮虾",
hobbyVal:[],
sexVal:1,
cityVal:2,
introVal:"武功高强,徒弟厉害..."
}
})
</script>
</body>
</html>
1.2 v-show
v-show用于展示和隐藏 <标签 v-show=“true/false”>
①v-show=“true/false”
②true代表显示，false代表隐藏
show只是隐藏标签,if直接就不会出现不满足条件的标签
<body>
<div id="app">
<input type="button" value="11111" onclick="shouyishou()" />
<!--
v-show="true/false"
true代表显示，false代表隐藏
-->
<img src="img/5.jpg" v-show="isShow"/>
</div>
<script>
var v = new Vue({
el: "#app",
data: {
isShow:true
}
});
function shouyishou() {
v.isShow = !v.isShow
}
</script>
</body>
1.3 v-if
show只是隐藏标签,if直接就不会出现不满足条件的标签
<div id="app">
<!--
if：判断(如果不满足条件，这个元素不会出现在页面上)
-->
<div v-if="age>=80">
皮皮虾你这是要成精了
</div>
<div v-else-if="age>=18 && age<80">
皮皮虾你要被煮了
</div>
<div v-else>
皮皮虾你还可以多活一会
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
age:80
}
})
</script>
1.4 v-on 事件绑定
- 事件绑定可以直接使用v-on
<标签 v-on:事件名=方法名> - 调用的方法可以不加()
- v-on有一种简写形式
<标签 @事件名=方法名>
<body>
<div id="app">
<!--
v-on：事件类型="方法名称"
-->
<input v-on:click="clickMe" type="button" value="点我啊" />
<input v-on:click="clickMe()" type="button" value="点我啊" />
<hr />
<!--
事件注册的简写形式
@click:
-->
<input @click="clickMe()" type="button" value="点我啊" />
<hr />
<input @click="hello('哈不哈')" type="button" value="再来点啊" />
<hr/>
<button @click="age++">{{age}}</button>
</div>
<script>
var v = new Vue({
el: "#app",
data: {
age:20
},
methods:{
clickMe(){
alert(1)
},
hello(msg){
alert("哈麻皮" + msg)
}
}
})
</script>
</body>
2 vue小功能
2.1 计算：computed
- 如果一个值需要大量计算展示，建议使用计算属性先计算完毕再直接使用
- 在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
- 计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。
<body>
<div id="app">
{{formaDate }}
</div>
<script>
var v = new Vue({
el: "#app",
//属性值 一般写死的 或者后台读取
data: {
bronDate:1566526686736
},
//计算属性
computed:{
//这里看起来是一个方法 用的时候当属性来使用
formaDate(){
let date = new Date(this.bronDate);
return date.getFullYear()+ "-"+(date.getMonth()+1)+ "-"+date.getDate()
}
}
})
</script>
</body>
2.2 watch监控属性
- watch可以让我们监控一个值的变化。从而做出相应的反应。
- 比如咱们监听一个文本框中的变化，然后进行相应的高级查询(百度搜索)
<body>
<div id="app">
<input type="text" v-model="msg" />
</div>
<script>
var v = new Vue({
el: "#app",
data: {
msg:"皮皮虾"
},
watch:{
//每次msg属性修改 都会执行这个方法
/**
*
* @param newVal 修改后 新的属性
* @param oldVal 修改前的属性 旧属性
*/
msg(newVal,oldVal){
console.log(newVal,oldVal)
}
}
})
</script>
</body>
3 组件
- 自定义标签(重复代码的抽取)
- 组件分为全局组件与局部组件
- 组件的的template有且只能有一个标签
3.1 全局组件
<body>
<div id="app">
<my-tag></my-tag>
</div>
<div id="app1">
<my-tag></my-tag>
</div>
<script>
//让vue注册一个组件
/**
* 全局组件 只要vue挂载的容器 都可以使用
*
* 第一个参数 组件的名称
* 第二个参数 这个组件的具体的配置
* tpmplate:模板 （就是对应的html代码）
* 模板中有一个要求 有且只有一个外部标签
* myTag:驼峰命名使用的时候 用 （my-tag）
*/
Vue.component("myTag",{
template:"<div><h1>皮皮虾好吃不</h1><h2>好吃啊</h2></div>"
});
new Vue({
el: "#app",
})
new Vue({
el: "#app1",
})
</script>
</body>
3.2 抽一抽
以后我们看到很多别人的代码都是抽过后的效果
<body>
<div id="app">
<mytag></mytag>
</div>
<script>
//模板对应的值
const tempStr = "<div><h1>皮皮虾好吃不</h1><h2>好吃啊</h2></div>";
//定义一个常量 就是一个基本配置
const componentConfig = {
template:tempStr
};
//定义一个组件
Vue.component("mytag",componentConfig);
new Vue({
el: "#app"
})
</script>
</body>
3.3 局部组件
<body>
<div id="app">
<mytag></mytag>
</div>
<div id="app1">
<mytag></mytag>
</div>
<script>
new Vue({
el: "#app",
components:{
//mytag 就是组件的名称
mytag:{
template:"<h1>娃哈哈哈哈</h1>"
}
}
})
new Vue({
el: "#app1",
})
</script>
</body>
3.4 组件模块
3.4.1 template标签模板
<body>
<div id="app">
<mytag></mytag>
</div>
<!--
使用模板标签 里面的内容是不糊显示到页面的
template 入股哦卸载挂载容器中 会显示出来一次
-->
<template id="myTemp">
<form method="post">
用户名：<input type="text" /><br>
密码：<input type="password" /><br>
<input type="button" value="登录" />
</form>
</template>
<script>
//定义一个常量 就是一个基本配置
const componentConfig = {
//直接引用模板数据
template:"#myTemp"
};
//定义一个组件
Vue.component("mytag",componentConfig);
new Vue({
el: "#app",
})
</script>
</body>
3.4.2 script标签模板
<body>
<div id="app">
<mytag></mytag>
</div>
<!--
使用script标签 里面的内容是不糊显示到页面的
type="text/template" 就知道里面的代码师模板
-->
<script type="text/template" id="myTemp">
<form method="post">
用户名：<input type="text" /><br>
密码：<input type="password" /><br>
<input type="button" value="登录" />
</form>
</script>
<script>
//定义一个常量 就是一个基本配置
const componentConfig = {
//直接引用模板数据
template:"#myTemp"
};
//定义一个组件
Vue.component("mytag",componentConfig);
new Vue({
el: "#app",
})
</script>
</body>
3.4.3 其他
<body>
<div id="app">
<mytag></mytag>
</div>
<!--
使用script标签 里面的内容是不糊显示到页面的
type="text/template" 就知道里面的代码师模板
-->
<template id="myTemp">
<form method="post">
{{usernameLable}}：<input type="text" /><br>
{{passwordLable}}：<input type="password" /><br>
<input type="button" @click="login" value="登录" />
</form>
</template>
<script>
//定义一个常量 就是一个基本配置
const componentConfig = {
//直接引用模板数据
template:"#myTemp",
//这个data应该是一个方法 返回相应的数据
data(){
return{
usernameLable:"用户名",
passwordLable:"密码"
}
},
methods:{
login(){
alert(123)
}
}
};
//定义一个组件
Vue.component("mytag",componentConfig);
new Vue({
el: "#app",
data:{
usernameLable:"用户名"
}
})
</script>
</body>
4 路由
- 路由是一个插件，需要单独引入
- 输入命令：
npm install vue-router - 引入js文件
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
- 准备链接
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/chong">皮皮虫</router-link>
<router-link to="/employee">皮皮虾</router-link>
<router-link to="/department">皮皮怪</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
- 创建与路由绑定
<script>
//创建一个路由对象
let router = new VueRouter({
routes:[
//路由的地址对应相应的组件
{
path: '/chong',
component: {
template: '<div>不好吃</div>'
}
},
{
path: '/employee',
component: {
template: '<div>炸着吃</div>'
}
},
{
path: '/department',
component: {
template: '<div>煮着吃</div>'
}
}
]
});
new Vue({
el:"#app",
//绑定相应的路由
router:router
})
</script>
5 webpack打包
5.1 打包认识
- 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
- 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
- 将代码打包的同时进行混淆，提高代码的安全性。
5.2 webpack认识
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分 析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静 态文件，减少了页面的请求。 接下来我们简单为大家介绍 Webpack 的安装与使用
5.3 安装webpack
本地安装：
npm install webpack --save-dev
npm install webpack-cli --save-dev
全局安装：
由于网络问题，安装的时间可能会比较长，甚至会失败，可以多试几次npm install -g webpack
npm install -g webpack-cli
初始化项目
进入webpacktest中
输入命令 npm init -y
打包命令
输入打包命令 webpack js/a.js -o dist/bundle.js
webpack.config.js，该文件与项目根处于同级目录
//提供好的一个模块，不用管它，这里要求必需使用这个模块
var path = require("path");
//
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
}
CSS加载
加载器安装
npm install style-loader --save-dev
npm install css-loader --save-dev
webpack.config.js
var path = require("path");
//对于模块的一个输出
module.exports = {
...
//配置对应的打包器
module: {
rules: [
//配置的是css的支持，style:样式解析器 css:样式加载器
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
6 vue_cli(脚手架)
6.1 为什么要使用vue_cli
- 在开发中，需要打包的文件很多(html,css,js,图片,…)
- vue提供脚手架快速搭建web工程模板
- 全局安排命令(以后很多项目都会使用)：
npm install -g vue-cli
6.2 vue_cli快速上手
- 新建模块
- 进入目录
- 创建webpack项目
①命令:vue init webpack: 初始化
②命令:npm run dev: 直接运行
npm run build打包可以在服务器运行- 错误解决
①把项目中的node_modules删除掉
②everythink中找到vue-cli找到，然后删除
③如果还不行，直接拷备其它人的node_modules过来使用
7 切换npm的镜像
- 全局安装nrm:
npm install nrm -g - 查看镜像源
nrm ls - 切换淘宝镜像源
nrm use taobao
198
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
