-
- 宝慕林7643041 2021-11-16
开始学习vue 适合小白 不错
- 0赞 · 0采集
-
- times5273090 2020-10-13
- 完成
- 0赞 · 0采集
-
- 小柒叶 2020-06-24
- 太有用了，我不会vue框架，看了视频，了解了什么是vue。
-
截图0赞 · 0采集
-
- qq_慕雪5002287 2020-04-17
- 本人vue小白，对我帮助很大
- 0赞 · 0采集
-
- KorbinYang 2019-11-02
2019.11.02 第二次观看！
- 0赞 · 0采集
-
- 疯掉了的鸽子 2019-09-12
v-text 会进行转译
v-html 不会进行转译
v-on:click="xxx" 或者 @click // 绑定事件 相当于html的class跟id
vue对象属性：
el：绑定标签，
data：数据，
methods：{ //定义方法
xxx:function(){}
}
template：模板
{{number}}：插值表达式，也就是把number的值插入到h1之中；
v-text="number"：h1的内容由number这个变量决定，v-text是Vue中的一个指令，
这个指令里面的东西跟着的是一个变量，它告诉h1显示的内容就是"number"这个变量；
v-html="c ontent"：v-html与v-text的区别是，v-html不会转义，而v-text会转译；
v-on:click="handleClick"：通过v-on给元素绑定一个Click事件，事件触发方法。
v-on:click的简写方法：@click
Vue中的属性绑定和双向数据绑定
v-bind：属性绑定。缩写为冒号 : (:title)
v-model：双向数据绑定，随着数据的修改与之对应的也会修改。
computed：{ } 计算属性
watch：{ } 监听器
v-if，v-show与v-for指令：
1.v-if：当对应data中的值show是true时显示，为false，则把这个标签就移除。
2.v-show：而当对应指令值为false时，div标签会隐藏，并不会像v-if那样被清除，只是把div标签的display属性变成none；
3.v-for：当有一个数据需要做循环展示时，帮助把每一条数据做循环，循环展示li标签；
每个组件都是一个实例，每个vue实例都是一个组件
Vue.component 注册全局组件
例：Vue.component('todo-item',{
template:'<li>item</li>'
})
局部组件
var TodoItem = {
template:'<li>item</li>'
}
new Vue({
el:"xxx", //挂载点
components:{ //申明
'todo-item':TodoItem
}
})
单文件组件的template模板中，只能有一个外层<div>，其它应该都在这一层<div>里
单文件组件的script中，data不是{}数据形式，是function()函数形式，return返回值是{}数据
- 6赞 · 4采集
-
- 慕瓜2204935 2019-06-08
zgl 2019.6.8 study done.
- 0赞 · 0采集
-
- 喵慕神 2019-04-12
插值表达式 {{}} v-text v-html
事件 v-on:click="handleClick" 简写 @click="handleClick"
模板指令 v-bind:title=" 'dell lee' + title" 简写 :title="title"
双向绑定
--<input :value="content"/> 属性绑定
<input v-model="content"/> 双向数据绑定
计算属性
<input v-model="firstName"/>
<input v-model="lastName"/>
<div>{{fullName}}</div>
侦听器
v-if 移除/添加 DOM v-show 显示/隐藏 v-for <li v-for="(item,index) of list" :key="index">{{item}}</li> :key 提升渲染效率 不能重复
子组件向外触发事件
this.$emit('delete',this.index)
监听子组件事件
<todo-item @delete="handleDelete"></todo-item>
new Vue({
el:"#id",
data:{
content:"hello",
title="this is hello world",
firstName:'',
lasrName:'',
count:0,
list:[1,2,3]
},
template:'',
computed:{
fullName:function(){
return this.firstName + this.lastName
}
},
watch:{
firstNme:function(){
this.count++
}
fullName :function(){
this.count++
}
},
methods:{
handleClick:function(){
this.content="world";
},
handleDelete:function(index){
this.list.splice(index,i)
}
}
})
- 0赞 · 1采集
-
- john999 2019-03-22
- this.$emit
-
截图0赞 · 0采集
-
- 慕容7167301 2019-03-12
- Style. 标签上的scoped 的属性代表样式为定义局部样式，否则为全局
-
截图2赞 · 1采集
-
- AnswerGong 2018-10-14
vue-cli:脚手架工具
- 0赞 · 0采集
-
- 雨中笑 2018-06-19
这个课程的代码我已经打包在 https://github.com/1171843306/Vue.js
大家可以去那里下载或者观看- 4赞 · 0采集
-
- 城南待花开 2018-05-08
scope--作用域
- 0赞 · 0采集
-
- 慕丝244805 2018-04-23
very good
- 1赞 · 0采集
-
- 慕仙1925118 2018-04-19
插值表达式 {{}} v-text v-html
事件 v-on:click="handleClick" 简写 @click="handleClick"
模板指令 v-bind:title=" 'dell lee' + title" 简写 :title="title"
双向绑定
--<input :value="content"/> 属性绑定
<input v-model="content"/> 双向数据绑定
计算属性
<input v-model="firstName"/>
<input v-model="lastName"/>
<div>{{fullName}}</div>
侦听器
v-if 移除/添加 DOM v-show 显示/隐藏 v-for <li v-for="(item,index) of list" :key="index">{{item}}</li> :key 提升渲染效率 不能重复
子组件向外触发事件
this.$emit('delete',this.index)
监听子组件事件
<todo-item @delete="handleDelete"></todo-item>
new Vue({
el:"#id",
data:{
content:"hello",
title="this is hello world",
firstName:'',
lasrName:'',
count:0,
list:[1,2,3]
},
template:'',
computed:{
fullName:function(){
return this.firstName + this.lastName
}
},
watch:{
firstNme:function(){
this.count++
}
fullName :function(){
this.count++
}
},
methods:{
handleClick:function(){
this.content="world";
},
handleDelete:function(index){
this.list.splice(index,i)
}
}
})
- 3赞 · 5采集
