-
这个课程的代码我已经打包在 https://github.com/1171843306/Vue.js
大家可以去那里下载或者观看查看全部 -
v-if="" : 控制DOM存在与否；
v-show="" : 控制DOM显示与否；
v-for="（item, index）of list" ：key="index": 控制循环列表的输出；
（ 意为把 list 数组下的每一个元素赋值给变量名 item ,并把每个元素的下标存到对应的 index 中。PS : key 的值不可重复）
查看全部 -
组件可以分为全局组件和局部组件
全局组件定义之后可以在模板里的任何地方调用
局部组件需要通过components在实例里进行注册才能使用，vue模板里的属性使用必须要通过props来接收
查看全部 -
插值表达式 {{}} 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)
}
}
})
查看全部 -
通过script标签引入vue.js的时候，最好是把script标签放到head标签里，可以避免“抖屏”的情况。
查看全部 -
将js文件引入放在head里面是为了防止页面发生抖屏
我们可以通过new Vue来创建一个vue的实例
实例里面的el代表挂载点，是将数据挂载在id名为root的dom节点上 实例里面的data模块是为存放数据的 使用花括号来使用数据。
查看全部 -
data：数据
template：模板
v-text: 会转译
v-html: 不会转译
v-on: 事件绑定v-on:的简写为@符号
<div v-on:click myClick>{{content}}</div>
//myClick函数内容写在 vue里的method里
<script>
new Vue({
el:"#",里面绑定一个id
data:{
content:"hello"
},
method:{
myClick:function(){
this.content="world"
}
}
}
})
</script>
查看全部 -
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返回值是{}数据
查看全部 -
在Vue中，父组件向子组件传入值是通过属性的方式传入的。通过props来传入值
通过emit来将子元素上的事件传递给父级元素。
有点绕，可以看多两遍
查看全部 -
{{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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./vue.js"></script> <title>Vue入门</title> </head> <body> <div id="root"> <div @click="handleClick">{{content}}</div> </div> <script> new Vue({ el: "#root", data: { content: "hello" }, methods: { handleClick: function() { this.content = "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">{{msg}}</div> <script> new Vue({ el: "#root", data: { msg: "Hello World" } }) </script> </body> </html>上课代码笔记
查看全部 -
单文件组件的template模板中，只能有一个外层<div>，其它应该都在这一层<div>里
单文件组件的script中，data不是{}数据形式，是function()函数形式，return返回值是{}数据
查看全部 -
0、安装node.js
官网下载对应的安装包
1、全局安装vue-cli
npm install --global vue-cli
2、在当前路径下创建一个基于webpack模板的项目
vue init webpack my-project
3、安装依赖
cd my-project
npm run dev
查看全部 -
v-if和v-show：这两个属性用来控制dom显示隐藏，当值为true则显示，为false则隐藏。if和show的一大区别在于if是通过销毁dom的方式实现隐藏，而show是通过display=false的方式实现的，具体需要灵活使用；
v-for属性：主要用于遍历数组数据，并自动生成dom列表。如v-for='(item, index) of list' :key='index'，其中:key必须是唯一的，item是遍历出的子项；
查看全部 -
数据占位符：{{data}}，对应data属性的key；
数据模板：v-text和v-html，对应data属性的key，使用方法同数据占位符，注意text和html的区别；
dom模板：template属性能输出dom模板；
绑定事件：v-on:EVENT，简写为@EVENT如@click，事件对应methods属性的key，在事件方法中可以用this.data双向调用data中的数据。
绑定dom属性：v-bind:property='data'，简写:property='data'如:title='data'，data对应为data属性的key；
查看全部
举报