一,安装node-v12.14.1-x64.msi以及VSCodeUserSetup-x64-1.41.1.exe会自动进行环境配置
安装完成标志
写一个简单的小例子:1.使用软件打开路径C:\java\code\Vue\vuecode
自己设置的路径目录。
2.创建一个空的目录
3.
在目录中创建文件。
4.
在终端中打开目录。
5.
npm install vue
导入所需要的依赖文件,如果是打开别人的项目 直接使用npm install
可以导入别人的所有依赖。
6.可以新建一个lib目录将要用的js文件复制进去 方便之后的调用。
7.新建一个html文件 输入html可导入头部代码
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--视图层-->
<div id="app">
{{msg}}
</div>
</body>
<!--导入文件-->
<script src="./lib/vue.js"></script>
<script>
new Vue({
el:'#app',//绑定视图层
data:{
msg:'nihao'
}
})
</script>
</html>
8.发布使用
二,双向绑定及事件
绑定视图层与控制层,在视图层修改的数据控制层也会更改v-model
<input type="text" v-model:value="searchMap.keyword">
双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--视图层-->
<div id="app">
{{msg}}
<input type="text" v-bind:value="searchMap.keyword">
<input type="text" v-model:value="searchMap.keyword">
<button v-on:click="dianji()">点击后台输出</button>
</div>
</body>
<!--导入文件-->
<script src="./lib/vue.js"></script>
<script>
new Vue({
el:'#app',//绑定视图层
data:{
msg:'nihao',
searchMap:{
keyword:'guo'
}
},
methods:{
dianji(){
console.log("点击了")
}
}
})
</script>
</html>
事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--视图层-->
<div id="app">
{{msg}}
<input type="text" v-bind:value="searchMap.keyword">
<input type="text" v-model:value="searchMap.keyword">
<button v-on:click="dianji()">点击后台输出</button>
<button v-on:click="search()">查询</button>
<p>你要查询的是:{{result.title}}</p>
<p><a :href="result.site" target="_blank">{{result.title}}</a></p>
</div>
</body>
<!--导入文件-->
<script src="./lib/vue.js"></script>
<script>
new Vue({
el:'#app',//绑定视图层
data:{
msg:'nihao',
searchMap:{
keyword:'guo'
},
result:{}//所有的数据都在这里
},
methods:{
dianji(){
console.log("点击了")
},
search(){
this.result={
"title":"百度",
"site":"http://www.baidu.com"
}
}
}
})
</script>
</html>
三,路由
1.首先导入 vue和vue-router依赖
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>Hello,App!</h1>
<p>
<router-link to="/">首页</router-link>
<router-link to="/student">学员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
<router-link to="/all">全部</router-link>
</p>
<!-- 显示view -->
<router-view></router-view>
</div>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
<script>
//1、定义路由的组件
const welcome = { template: '<div>欢迎</div>' }
const student = { template: '<div>Student List</div>' }
const teacher = { template: '<div>Teachet List</div>' }
const all={ template:'<div>all List</div>'}
//2、定义路由
const routes = [
{ path: '/', redirect: '/welcome' },
{ path: '/welcome', component: welcome },
{ path: '/student', component: student },
{ path: '/teacher', component: teacher },
{path:"/all",component:all}
]
// 3、创建 router实例
const router = new VueRouter({
routes: routes //
})
// 挂载路由
new Vue({
el: '#app',
router
})
</script>
</body>
</html>