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>
