-
2-3 vue实例中的数据、事件和方法
v-text 显示的是原始的转移content
查看全部 -
2-3 vue实例中的数据、事件和方法
插值表达式，data中可以声明任意多个变量
查看全部 -
模板的另外一个方式：
vue会自动的结合模板和数据，生成要展示的内容送给挂载点！
查看全部 -
2-2 挂载点、模板与实例之间的关系
查看全部 -
2-1 创建第一个vue实例
挂载点、数据
vue替换原生的DOM操作
查看全部 -
html
<todo-item></todo-item>
script
全局组件
Vue.component('todo-item',{
template:'<li>item</li>'
})
局部组件
var TodoItem={
template:'<li>item</li>'
}
new Vue({
componments:{
'todo-item':TodoItem
})
查看全部 -
div的title属性设置鼠标悬停时显示的文本
查看全部 -
<div v-text="message"></div>
等于{{message}} 差值表达式
查看全部 -
TodoList.vue
<template> <div id="app"> <div> <input v-model="inputValue"/> <button @click="handleSubmit">提交</button> </div> <ul> <todo-item v-for="(item, index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-item> </ul> </div> </template> <script> import TodoItem from './components/TodoItem.vue' export default { components: { 'todoItem': TodoItem }, data () { return { inputValue: "", list: [] } }, methods: { handleSubmit () { // this.$data.list == this.list this.list.push(this.inputValue); this.inputValue = ""; }, handleDelete (index) { this.list.splice(index, 1); } } } </script> <style> </style>TodoItem.vue
<template> <li @click="handleDelete">{{content}}</li> </template> <script> export default { props: ["content", "index"], methods: { handleDelete () { this.$emit('delete', this.index); } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>查看全部 -
npm install -g @vue/cli vue create vue-cli-demo
参考网址：
https://cli.vuejs.org/guide/creating-a-project.html#vue-create
查看全部 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 入门</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <div> <input v-model="inputValue"/> <button @click="handleSubmit">提交</button> </div> <ul> <todo-item v-for="(item, index) of list" :key="index" :content="item"> </todo-item> </ul> </div> <script> // 全局组件 Vue.component('todo-item', { props: ["content"], template: '<li>{{content}}</li>' }); new Vue({ el: "#root", data: { inputValue: "", list: [] }, methods: { handleSubmit: function() { this.list.push(this.inputValue); this.inputValue = ""; } } }); </script> </body> </html>查看全部 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 入门</title> <script src="./vue.js"></script> </head> <body> <!-- 挂载点 --> <div id="root"> <div v-show="show">hello world</div> <button @click="handleClick">toggle</button> <ul> <li v-for="(item, index) of list" :key="index">{{ item }}</li> </ul> </div> <script> new Vue({ el: "#root", data: { show: true, list: [1, 2, 3] }, methods: { handleClick: function() { this.show = !this.show; } } }); </script> </body> </html>查看全部 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 入门</title> <script src="./vue.js"></script> </head> <body> <!-- 挂载点 --> <div id="root"> 姓：<input v-model="firstName"/> 名：<input v-model="lastName"/> <div>{{ fullName }}</div> <div>{{count}}</div> </div> <script> new Vue({ el: "#root", data: { firstName: "", lastName: "", count: 0 }, computed: { fullName: function() { return this.firstName + " " + this.lastName; } }, watch: { fullName: function() { this.count ++; } } }); </script> </body> </html>查看全部 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 入门</title> <script src="./vue.js"></script> </head> <body> <!-- 挂载点 --> <div id="root"> <div v-bind:title="title">hello world</div> </div> <script> new Vue({ el: "#root", data: { title: "this is hello world" } }); </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 入门</title> <script src="./vue.js"></script> </head> <body> <!-- 挂载点 --> <div id="root"> <div v-bind:title="title">hello world</div> <input v-model="content"/> <div>{{ content }}</div> </div> <script> new Vue({ el: "#root", data: { title: "this is hello world", content: "this is content" } }); </script> </body> </html>查看全部 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 入门</title> <script src="./vue.js"></script> </head> <body> <!-- 挂载点 --> <div id="root"> <h1 v-on:click="handleClick">{{ content }}</h1> </div> <script> new Vue({ el: "#root", data: { content: "hello" }, methods: { handleClick: function() { this.content = "world"; } } }); </script> </body> </html>查看全部
举报
0/150
提交
取消