vue基本语法
Vue 基本 语法
2023-06-13 09:16:14 时间
<!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>
相关文章
- Vue之Router(二)
- 如何查看Vue项目vue的版本号
- 如何查看vue版本号以及vue/cli脚手架版本号「建议收藏」
- vue中 父组件向子组件传值案例讲解「建议收藏」
- vue中 关于$emit的用法
- Vue(3)webstorm代码格式规范设置与vue模板配置
- 写给vue转react的同志们(6)
- Vue内部是如何渲染视图
- VUE组件封装_vue组件内部双向绑定
- Vue生成二维码_vue视频软件怎么生成二维码
- vue 项目启动报错:Syntax Error: Unexpected token 的解决方法
- vue跨域解决方案之–proxy代理
- Vue项目骨架屏注入实践
- Vue 快速入门(二)
- 校招前端一面必会vue面试题指南3
- Vue实现图片大图预览,v-viewer组件的使用方法演示
- vue 中使用 v-bind 与 v-on 来实现 v-model 双向绑定 ?
- 为在线客服系统接入chatGPT(四):chatGPT接口vue网页版,可以联系上下文语境,可以实现自己的chatGPT,附代码
- Vue入门 基本使用 与 事务管理【1】
- Vue的beforeRouteEnter如何使用组件实例的方法
- vue.js入门篇之Vue.js 样式绑定
- js ajax 设置代理ip(vue Ajax 设置 代理ip)
- vue:将px转化为rem,适配移动端vant-UI等框架(postcss-pxtorem)
- 关于Vue中:key=”index”的console警告详解编程语言
- linux下快速部署Vue项目(linux部署vue)
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)
- Oracle Vue考场助力企业数据库技术突破(oracle vue考场)