vue,router,axios练习
1 绑定数据
div id="app">
{ { message } }
/div>
script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello elite,welcome to vue2!'
}
} )
/script>
2 v-if
div id="app">
button @click="Click()"> click me/button>
p v-if="clicked"> 你点击了按钮/p>
p v-else="clicked"> 没点击/p>
/div>
script>
var app3 = new Vue({
el: '#app',
data: {
clicked: false
} ,
methods: {
Click(){
this.clicked = true
}
} ,
} )
/script>
3.v-for
div id="app">
ol>
li v-for="(todo,index) in todos" :key="index">
{ { todo.itemn } }
/li>
/ol>
/div>
script>
var app = new Vue({
el: '#app',
data: {
todos: [
{ itemn: '学习js' } ,
{ itemn: '学习Vue' } ,
{ itemn: '学习java' } ,
{ itemn: '学习python' }
]
}
} )
/script>
4. v-bind
div id="app">
ol>
!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
todo-item
v-for="item in todoList"
v-bind:todo="item"
v-bind:key="item.id"
> /todo-item>
/ol>
/div>
script>
Vue.component('todo-item', {
props: ['todo'],
template: 'li> { { todo.language } } /li> '
} )
var app7 = new Vue({
el: '#app',
data: {
todoList: [
{ id: 0, language: '学习vue' } ,
{ id: 1, language: '学习java' } ,
{ id: 2, language: '学习python' }
]
}
} )
/script>
5.component
div id="app">
todo-item> /todo-item>
/div>
script>
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: 'li> 这是个li component/li> '
} )
var app = new Vue({
el: '#app',
data: {
todos: [
{ itemn: '学习js' } ,
{ itemn: '学习Vue' } ,
{ itemn: '学习java' } ,
{ itemn: '学习python' }
]
}
} )
/script>
6.v-model
div id="app">
p> { { message } } /p>
input v-model="message">
/div>
script>
var app6 = new Vue({
el: '#app',
data: {
message: ''
}
} )
/script>
7.生命周期
div id="app">
p> { { message } } /p>
/div>
script>
var app6 = new Vue({
el: '#app',
data: {
message: '李白'
} ,
created() { // 在渲染之前执行
console.log("created....")
} ,
mounted() { // 在渲染之后执行
console.log("mounted....")
} ,
methods: {
method1(){
console.log("1212")
}
} ,
} )
/script>
8.router
div id="app">
h1> Hello App!/h1>
p>
!-- 使用 router-link 组件来导航. -->
!-- 通过传入 `to` 属性指定链接. -->
!-- router-link> 默认会被渲染成一个 `a> ` 标签 -->
router-link to="/"> 首页/router-link>
router-link to="/user"> 用户管理/router-link>
router-link to="/menu"> 菜单管理/router-link>
/p>
!-- 路由出口 -->
!-- 路由匹配到的组件将渲染在这里 -->
router-view> /router-view>
/div>
script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Welcome = { template: 'div> 欢迎/div> ' }
const User = { template: 'div> user list/div> ' }
const Menu = { template: 'div> menu list/div> ' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' } , //设置默认指向的路径
{ path: '/welcome', component: Welcome } ,
{ path: '/user', component: User } ,
{ path: '/menu', component: Menu }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
} )
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
} )
// 现在，应用已经启动了！
/script>
9.axios
json数据：
{
"data":[
{
"username":"elite",
"age":12
} ,
{
"username":"marry",
"age":14
}
]
div id="app">
div> axios demo/div>
!--循环列表-->
table border="1">
tr>
td> 姓名/td>
td> 年龄/td>
/tr>
tr v-for="(item,index) in userList">
td> { { item.username} } /td>
td> { { item.age} } /td>
/td>
/tr>
/div>
script>
var app = new Vue({
el: '#app',
data: {
userList: []//数组
} ,
created() {
this.getUserList()
} ,
methods: {
getUserList(id) {
debugger;
//vm = this
axios.get('data.json')
.then(response => {
console.log(response)
this.userList = response.data.data
} )
.catch(error => {
console.log(error)
} )
}
}
} )
/script>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： vue,router,axios练习
本文地址： https://pptw.com/jishu/301026.html