Vue简单入门
01-vue入门
<!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">
<!-- 使用插值表达式,获取data定义值 -->
{{message}}
</div>
<script src="vue.min.js"></script>
<script>
//创建一个Vue对象
new Vue({
el:'#app',//绑定vue作用的范围
data:{//定义页面中显示的数据模型
message:'Hello,Vue!'
}
})
</script>
</body>
</html>
02-测试代码片段
文件=>首选项=>用户代码片段=>新建全局代码片段:vue-html.code-snippets
下面是文件的内容:
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!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\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
新建html,在里面输入vuehtm按下回车则可以
<!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">
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
03-指令v-bind
<!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">
<!-- v-bind指令
单向数据绑定
这个指令一般在标签属性里面,获取值-->
<h1 v-bind:title="message">
{{content}}
</h1>
<!-- 简写方式 -->
<h2 :title="message">
{{content}}
</h2>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
content: '我是标题',
message: '页面加载于'+ new Date().toLocaleString()//获取当前时间
}
})
</script>
</body>
</html>
04-指令v-model
<!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">
<!-- 单向绑定 -->
<input type="text" v-bind:value="searchMap.keyword"></input>
<!-- 双向绑定 -->
<input type="text" v-model:value="searchMap.keyword"></input>
<p>{{searchMap.keyword}}</p>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyword:'sheepc'
}
}
})
</script>
</body>
</html>
05-vue事件操作
<!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">
<!-- vue绑定事件 -->
<button v-on:click="search()">查询</button>
<!-- vue绑定事件简写方式 ,不加括号也行,一般加上-->
<button @click="search">查询1</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyWord:'sheepc'
},
//查询结构
result: {}
},
methods:{//定义多个方法
search(){
console.log('search.....')
},
f1(){
console.log('f1.....')
}
}
})
</script>
</body>
</html>
06-vue修饰符
v-on:submit.prevent="onSubmit"让提交表单走自己写的方法onSubmit
<!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">
<form action="save" v-on:submit.prevent="onSubmit">
<input type="text" id="name" v-model="user.username"></input>
<button type="submit">保存</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
user:{}
},
methods:{
onSubmit(){
if(this.user.username){
console.log('提交表单')
}else{
alert('请输入用户名')
}
}
}
})
</script>
</body>
</html>
07-vue指令v-if
<!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">
<input type="checkbox" v-model="ok">是否同意</input>
<!-- 选中显示 -->
<h1 v-if="ok">可以</h1>
<!-- 没选中显示 -->
<h1 v-else>不可以</h1>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok:false
}
})
</script>
</body>
</html>
08-vue指令v-for
<!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">
<ul>
<!-- n是遍历出来的对象 10是要遍历的对象 -->
<li v-for="n in 10">{{n}}</li>
</ul>
<ol>
<li v-for="(n,index) in 10">{{n}}---{{index}}</li>
</ol>
<hr/>
<table>
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.usename}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList:[
{id:1,usename:'helen',age:18},
{id:2,usename:'peter',age:19},
{id:3,usename:'andy',age:20}
]
}
})
</script>
</body>
</html>
09-vue组件
<!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">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
//定义vue使用的组件
components:{
//组件的名字
'Navbar':{
//组件的内容
template:'<ul><li>首页</li><li>学员管理</li></li></ul>'
}
}
})
</script>
</body>
</html>
10-vue组件全局组件
src=“components/Navbar.js”>在components文件夹下创建Navbar.js
Vue.component('Navbar',{
template:'<ul><li>首页</li><li>学员管理</li></li></ul>'
})
<!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">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
11-vue生命周期
created()
//页面渲染之前执行
mounted
//页面渲染之后执行
debugger
//断点
<!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">
hhhhh
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
created(){//断点
debugger
//页面渲染之前执行
console.log('created....')
},
mounted(){
debugger
//页面渲染之后执行
console.log('mounted....')
}
})
</script>
</body>
</html>
12-vue路由
<!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">
<h1>Hello App!</h1>
<p>
<!--使用router-link组件来导航 -->
<!-- 通过传入to属性指定链接 -->
<!-- <router-link>默认会被渲染成一个<a>标签 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染到这里 -->
<router-view></router-view>
</div>
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script>
//1.定义路由组件
//可以从其他文件import进来
const Welcome={template:'<div>欢迎</div>'}
const Student={template:'<div>Student list</div>'}
const Teacher={template:'<div>teacher list</div>'}
//2.定义路由
//每个路由映射一个组件
const routes=[
{path:'/',redirect:'/welcome'},
{path:'/welcome',component: Welcome},
{path:'/student',component: Student},
{path:'/teacher',component: Teacher}
]
//3.创建router实列,然后传'routes'配置
const router =new VueRouter({
routes //相当于 routes:routes
})
//4.创建和挂载根实例
//从而让整个应用都要路由功能
new Vue({
el: '#app',
router,
data: {
}
})
</script>
</body>
</html>