<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--vue基本语法-->
<script src="vue.min.js"></script>
<div id="app">
<input type="text" v-bind:value="message">
<input type="text" :value="message"> <!-- v-bind可以省略 -->
<br>
<input type="text" v-model:value="message">
<input type="text" v-model="message"> <!-- :value可以省略 -->
<br>
<input type="checkbox" v-model="ok">
<h3 v-if="ok">选中了</h3>
<h3 v-else>没有选中</h3>
<table border="2">
<tr v-for="(user, index) in userList">
<td>{{index}}</td>
<td>{{user.id}}</td>
<td>{{user.username}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#app",
data: {
message: "hello vue",
ok: false,
userList: [
{id: 1, username: 'helen'},
{id: 2, username: 'peter'},
{id: 3, username: 'andy'}
]
}
})
</script>
</body>
</html>
<!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>
<!--vue生命周期-->
<body>
<div id="app">
{{message}}
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
message: "hello vue"
},
created(){ // 页面渲染之前执行
debugger
console.log('created...')
},
mounted(){ // 页面渲染之后执行
debugger
console.log('mounted...')
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="\en\">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<meta name="\viewport\" content="\width=device-width" initial-scale="1.0\">
<title>Document</title>
</head>
<!--vue组件-->
<body>
<div id="app">
{{message}}
<ssm></ssm>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
message: "hello vue啊啊"
},
components: {
'ssm': {
template: '<ul><li>vue my components</li></ul>'
}
}
})
</script>
</body>
</html>路由，也就是导航栏那种的
- 引入js
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>- 编写html
<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>- 编写js
<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. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
// 现在，应用已经启动了！
</script>