-
- qq_慕瓜8424802 2024-03-29
上面的div标签称为vue实例的挂载点
- 0赞 · 0采集
-
- qq_慕瓜8424802 2024-03-29
El指的是Vue实例与哪一个节点绑定
- 0赞 · 0采集
-
- qq_慕瓜8424802 2024-03-29
局部组件调用需要做一个声明
- 0赞 · 0采集
-
- qq_慕瓜8424802 2024-03-29
通过vue.component定义的组件称为全局组件
- 0赞 · 0采集
-
- qq_慕瓜8424802 2024-03-29
实现V-bind数据项的绑定
- 0赞 · 0采集
-
- weixin_慕姐4358392 2024-03-08
挂载点：
vue实例的里面el属性对应的id节点，vue只会处理挂载点里面的内容
模版：
指挂载点里面的内容
写法：
1)：写在挂载点里面
2)：使用template属性写在vue的实例里面
挂载点，模版，实例之间的关系：
在vue的实例里面指定一个挂载点，然后写上模版，vue就会自动结合
模版和数据生成最终想展示的内容并放在挂载点里面
- 0赞 · 0采集
-
- OneCheesyMofo 2024-02-29
模板指的就是挂载点里面的内容
- 0赞 · 0采集
-
- OneCheesyMofo 2024-02-29
data:数据全部放data里面
- 0赞 · 0采集
-
- OneCheesyMofo 2024-02-29
el：指绑定哪个元素！
- 0赞 · 0采集
-
- 慕尼黑3503962 2023-06-14
- my hvr. v
61 - 0赞 · 0采集
-
- 慕尼黑3503962 2023-06-14
- nvm r u know fecb
kebmHbep canceled hh.hh hhh - 0赞 · 0采集
-
- 慕尼黑3503962 2023-06-14
- rbr ju$ts
- 0赞 · 0采集
-
- 慕尼黑3503962 2023-06-14
- aqa3376336 fewwwgg
阿拉啊啊-- -
644
叫我。a吗3 =-6就@。亚奥就是阿拉
==爱上了-/4@按时睡觉%%*466%na
aasaaaaasoso.-
04#
#_##mqaaw - 0赞 · 0采集
-
- 慕圣8054825 2023-05-28
- )丫㇏:‘冫济141′º 疒㇏0
- 0赞 · 0采集
-
- ApinkChoLong 2023-05-26
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="addValue">提交</button>
<button @click="deleteValue">删除</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods: {
addValue: function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
deleteValue: function() {
this.list.pop()
}
}
})
</script>
- 0赞 · 0采集
-
- Heracles 2023-05-17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TodoList</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"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
props: ['content', 'index'],
template: '<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function() {
this.$emit('delete', 'index');
}
}
})
new Vue({
el:"#root",
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete: function(index) {
this.list.splice(index, 1);
}
}
})
</script>
</body>
</html>
- 0赞 · 0采集
-
- AppMan 2023-03-07
scoped 表示样式只针对该组件，一般不会去掉，否则全局都会同名调用。
- 0赞 · 0采集
-
- AppMan 2023-03-06
父组件定义的模板，模板会显示父组件list的数据
创建子组件todo-item，传递名为content和index参数对应item,index的值。
子组件props声明传递的参数，
当点击的时候handleClick，this.$emit会向外触发一个名为'delete'的事件，事件的值为this.index，
父组件创建子组件的时候@delete监听该事件，当触发delete事件的时候会触发父组件handleDelete方法。
- 0赞 · 0采集
-
- AppMan 2023-03-06
每一个Vue.component组件都是一个Vue的实例
如果实例没有定义template模板的方法，那么就寻找el挂载点根标签作为它的模板
Vue实例就是一个组件，每个组件也是一个Vue。
每一个主键中都可以绑定@click点击事件和添加methods方法
- 0赞 · 0采集
-
- AppMan 2023-03-06
Vue.component 定义全局组件
: content='itemxx' 传递值参数
props: ['content'], 声明接收名字为content 的参数，不然{{content}} 无法接收传递的参数
- 0赞 · 0采集
-
- AppMan 2023-03-06
Vue.component() 定义全局组件
定义局部主键
var TodoXxx = {
template: '<li>xxx</li>'
}
需要再Vue的components中声明注册，否则无法调用
- 0赞 · 0采集
-
- AppMan 2023-03-06
v-model 双向绑定data里面的inputValue的值
v-for 绑定data 里面的list值
定义提交方法
this.list.push(this.inputValue) 提交输入的值到list
this.inputValue = '' 情况输入的值
- 0赞 · 1采集
-
- AppMan 2023-03-06
v-for 表示把数据循环展示
v-for="itemxx of list" 表示取data 里面list的值，for循环每一项赋值给itemxx，循环展示的时候取值既可以用{{itemxx}}。
使用 :key="itemxx" 可以提升v-for的性能，
但注意key值要求每一项的值都不同。
可以v-for="(itemxx, ixx) of list" :key="ixx" 这样写表示使用第几项作为key值，这样保证key值的不同。
- 0赞 · 0采集
-
- AppMan 2023-03-06
v-if 表示直接添加或去掉标签，即true添加显示标签，false移除销毁标签。
@click 表示绑定methods里面的方法
v-show 表示标签的style 样式添加 display:none 属性，并没有直接去掉标签
- 0赞 · 0采集
-
- AppMan 2023-03-06
watch 监听器，表示监听某属性数据发生变化时触发
或者监听计算属性的变化，如全名 fullName
- 0赞 · 0采集
-
- AppMan 2023-03-06
computed 计算属性，表示通过别的属性计算出来的。
当被计算的属性没有改变时，则会使用computed的缓存值。
- 0赞 · 0采集
-
- AppMan 2023-03-06
v-model 实现数据双向绑定，绑定数据，数据变了则其它标签的数据也会跟着变。
- 0赞 · 0采集
-
- AppMan 2023-03-06
v-bind 标签：表示属性绑定。
使用v-xxx标签等号后面接的内容不再是字符串，而是JS表达式。
v-bind="title" title表示的是data里面的title内容。
v-bind="'Add xxx ' + title" 表示的结果是：Add xxx 加上data里面title的内容。
v-bind:title 可以缩写成 :title
- 0赞 · 0采集
-
- AppMan 2023-03-06
在vue里面改变data数据定义的内容。
当data数据内容改变时，vue会自动刷新绑定的标签，不需要操作document标签。
面向数据去编程。
示例：this.content = "world" 则直接改变了data里面定义的content的值。
- 0赞 · 0采集
-
- AppMan 2023-03-06
vue语法：
v-on:click 表示添加点击事件。
v-on:click="handleClick" 表示添加点击事件绑定handleClick方法
在vue的methods:{} 对象里面添加对应的方法即可调用
v-on:click 可以简写成 @click
- 0赞 · 0采集
