Vue学习01
MVVM
- model view viewmodel
第一个VUE程序(声明式渲染-将数据绑定到DOM节点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello,vue"
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
<div id="app">
//title属性是把鼠标放上去会显示这个title
<span v-bind:title="message">
你好世界
</span>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello,vue"
}
});
</script>
</body>
</html>
条件与循环(有条件的渲染)
- for语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../libs/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="item in array">
{{item.text}}
</li>
</ol>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
array:[
{text:"狂神说"},
{text:"java"},
{text:"yyds"}
]
}
});
</script>
</body>
</html>
- if语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../libs/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-if="message">
你是对的
</li>
<li v-else>
你是错的
</li>
</ol>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:true
}
});
</script>
</body>
</html>
绑定事件
- v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../libs/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="func">
点我
</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"好疼"
},
methods:{
func:function (event) {
alert(this.message)
}
}
});
</script>
</body>
</html>
双向绑定
-
前面是完成了vm到m的绑定,现在要完成m到vm的绑定
-
使用v-model
例子一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../libs/vue.js"></script>
</head>
<body>
<div id="app">
<!--将type的value值绑定到vm中的message-->
请输入: <input type="text" v-model="message">
{{message}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"初始值"
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../libs/vue.js"></script>
</head>
<body>
<div id="app">
选择题:
<select name="" id="" v-model="value">
<!-- 注意此处的写法,复选框的初始值为,请选择--- -->
<option value="" disabled>请选择---</option>
<option >A</option>
<option >B</option>
<option >C</option>
</select>
{{value}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
value:""
}
});
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rb6FPXuv-1635250331319)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20211022204409357.png)]
组件
- 实现代码的重用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../libs/vue.js"></script>
</head>
<body>
<div id="app">
<xpc v-for="item in items" v-bind:name="item"></xpc>
</div>
<script>
Vue.component("xpc",{
props:["name"],
template:'<h1>{{name}}</h1>'
});
var vm=new Vue({
el:"#app",
data:{
items:["java","php","python"]
}
});
</script>
</body>
</html>
axios(对比ajax)实现异步通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../libs/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div>{{info.name}}</div>
<a v-bind:href="info.url">点我跳转</a>
</div>
<script>
var vm=new Vue({
el:"#app",
data(){
return{
info:{
name:null,
url:null,
address:{
street:null,
city:null
}
}
}
},
mounted(){
axios.get("../data.json").then(response=>(this.info=response.data))
}
});
</script>
</body>
</html>
计算属性
- 相当于一个缓存,对计算结果进行缓存
- 他是一个属性,不是一个方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--func1是调用方法,所以要加()-->
<p>func1:{{func1()}}</p>
<!--func2算是属性所以不用加-->
<p>func2:{{func2}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello,vue"
},
methods:{
func1:function () {
return Date.now()
}
},
computed:{
func2:function () {
return Date.now()
}
}
});
</script>
</body>
</html>
- 从图中可以看出func2函数是将时间缓存着的,只要computed里面不执行其他的语句,他就不会刷新缓存
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lxfWm0HL-1635250331326)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20211025110948484.png)]
插槽(slot)
- v-on绑定事件可以简写成@
- v-bind 给组件绑定参数可以简写成 :
自定义事件内容分发
第一个vue-cli程序
- 安装npm淘宝镜像加速器
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装vue-cli
npm install -g @vue/cli
npm install -g @vue/cli --registry=https://registry.npm.taobao.org
- 创建项目
vue create my-project项目名称
//初始化并运行
cd my-project
npm run serve
- 如果要用webpack创建项目
//首先要安装这个
npm install -g @vue/cli-init
//创建项目
vue init webpack my-project2项目名称
//初始化并运行
cd my-project2
npm install
npm run dev
webpack的安装和使用
- npm直接安装即可
npm install webpack -g
npm install webpack-cli -g
//检查版本
webpack -v
webpack-cli -v
- 使用webpack打包,最重要的是要配置这个js文件,注意文件名必须是webpack.config.js
module.exports = {
entry: './modules/index.js', // 入口,表示,要使用 webpack 打包哪个文件
output: { // 输出文件相关的配置
filename: "./js/bundle.js" // 这是指定 输出的文件的名称
},
mode:"none"
}; // 添加 ;
- 写好配置文件后直接在terminal使用webpack打包即可
修改localhost端口号
- 直接在config目录下的index.js下面修改即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LL3WRWMI-1635250331329)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20211026141331202.png)]
vue-router
- 安装 注意:这个是每个项目都需要安装一次的,需要进项目安装
npm install vue-router --save-dev
- 在main.js加上router
import Vue from 'vue'
import App from './App'
//只需要配置router路径即可
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
//这里也要加上router
router,
components: { App },
template: '<App/>'
})
- src目录下面新建router,然后编写index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
//使用路由
Vue.use(VueRouter)
import firstPage from '../components/First'
import contentPage from '../components/Content'
//配置导出路由
export default new VueRouter({
routes:[
{
//页面路径
path:'/first',
name:'first',
//相关组件
component:firstPage,
},
{
path:'/content',
name:'content',
component:contentPage,
}
]
})
- 主页面编写 app.vue
<template>
<div id="app">
<h1>Vue-Router</h1>
<router-link to="/first">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
使用elementUi
- 安装相关插件
//安装elementUi
npm i element-ui -S
//安装sass加载器,用来加载css
cnpm install sass-loader node-sass --save-dev
- 在main.js引入如下
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
- 修改sass版本
1:先在pakage.json里面修改
2:终端先执行 npm install
3:再执行 cnpm install