-
父组件和子组件通信：属性形式 父组件中通过属性向子组件传递值，子组件接受属性的内容并再子组件上进行内容显示 子组件可以绑定事件，实现子组件的删除必须删除父组件的相关数据， 子组件和父组件通信：发布订阅模式 子组件被点击需要通知父组件把数据删除， 传递一个$emit，触发一个自定义事件，传递一个值， 父组件在模板里可以监听子组件向外传递的出发的delete事件，如果父组件监听到子组件的事件， 执行delete事件
查看全部 -
v-if控制DOM的存在与否
v-show控件DOM的显示与否
v-for控制一组数据，来循环显示数据
v-if 当值为false时，直接将该标签f元素从DOM元素中移除
v-show 当值为false时，将该标签元素隐藏 display:none
如果显示隐藏的频率较高的话，用v-show更好，性能高一些
<li v-for="(item,index) of list" :key="index">{{item}}</li>
使用v-for时加一个key属性，提升渲染效率，key值要求每一项都不相同
如果频繁对列表进行变更时不建议使用index作为key值
查看全部 -
build目录下放置的是项目的webpack配置文件，可以不动
config是针对线上环境和开发环境的配置文件，也可以不动
node_modules 指的是项目的依赖
src 指的是源代码放置的目录
static放置的是静态的资源
src中的main.js文件是整个项目的入口文件
vue-cli提供了一种新的vue的编码语法：单文件组件（一个.vue文件中包含了一个组件里必须的所有内容）
vue-cli的优势：
1可以使用es6。
2一个组件是一个.vue的文件所定义的，实现了组件的封装。
（在安装该工具之前需要安装npm和node）
查看全部 -
总结一下大概的逻辑过程：
（1）：父组件通过prop向子组件传值 子组件获得父组件传来的内容和索引。
（2）：子组件通过$emit向父组件抛出触发事件名称（delete）和触发事件的list索引值。
（3）：父组件通过监听对应事件名称（@delete）触发函数handleDelete。函数通过子组件抛出的索引值对应删除list查看全部 -
我们可以把一个较大的项目拆分成一个个小的组件，这样维护起来就比较方便了 vue组件的定义，这里说道两种： 全局组件：vue提供了vue.component()来定义组件，第一个参数是组件的名字，也是我们将要写在dom里的标签，第二个参数是一个对象，里面可以定义一个模板，也是我们要显示的内容。 还有一种方式叫做局部组件，在外面定义一个对象，对象里面装着模板，但是这样还不可直接使用，我们需要在实例里面进行注册，配置标签名和内容。意思就是在我这个vue实例里面去使用这个组件。 在标签内可以像以往一样正常使用指令。 要想显示我们想显示的内容，我们可以进行传参，在标签里面定义属性，属性就是我们想要显示的内容然后在组件里面用props(固定)给接收过来就可以正常使用了。
查看全部 -
1、计算属性：（高效率，当计算的值发生改变的时候，就会重新计算）
语法：
computed：{
c：function（）{
return this.a+this.b
}
}
2、侦听器：（当某个值发生改变的时候，就进行对应的操作）
语法：
wacth：{
a：function（）{
//业务逻辑
}
}
查看全部 -
1、如果用script引入js，最好放在head里面，用于防止页面抖屏
2、vue编写着重于数据
3、语法：
<div id="root">//挂载点
{{msg}} //挂载点里的内容都叫做模板内容，也可以直接将模板内容放到实例的template里面去
</div>
<script>
new vue({ //vue实例
el:"#root",
data:{
msg:"hello wold"
}
})
</script>
查看全部 -
页面内容过于复杂，可将组件拆分，可定义全局组件或局部组件：
1、全局组件：在页面任何地方都能使用
//定义全局组件
Vue.component("todo-item", {
template: "<label>我是全局组件</label>"
});
new Vue({
el: "#root",
});
//使用全局组件
<div id="root">
<todo-item></todo-item>
</div>
2、局部组件：要在外层Vue实例里进行注册
//定义局部组件
var todoItem = {
template: "<label>我是局部组件</label>"
}
new Vue({
el: "#root1",
components: { //局部组件：要在挂载点(它的外层Vue实例，即此处的root1)进行注册
"todo-item-1": todoItem
}
});
//使用局部组件
<div id="root1">
<todo-item-1></todo-item-1><!--局部组件：只能在挂载点底下使用-->
<todo-item></todo-item><!--全局组件：在页面任何地方都能使用-->
</div>
组件拆分之后的传参问题：外部(html页面)可以通过自定义属性的形式传参，组件要定义props[]接收属性
//父组件向子组件传递数据：通过属性
Vue.component("todo-item-2", {
props: ["content", "index"],//接收从外部传进来的属性content、index
template: "<li>{{index+1}}、{{content}}</li>"
});
new Vue({
el: "#root2",
data: {
inputValue: "",
list: []
},
methods: {
submitClick: function () {
this.list.push(this.inputValue);
this.inputValue = "";
}
}
})
<div id="root2">
<div>
<input v-model="inputValue" />
<button @click="submitClick">提交</button>
</div>
<ul> <!--自定义属性content、index-->
<todo-item-2 v-for='(item,index) of list'
:key="index"
:content="item"
:index="index"
>
</todo-item-2>
</ul>
</div>
查看全部 -
vue只会对它所对应的挂载点内的内容产生作用
挂载点里的内容称为模版
模版可以通过template写在vue中，和写在挂载点下面的作用是一样的
vue实例绑定到挂载点后会自动对模版和数据内容进行处理，生成要最终展示的内容
查看全部 -
npm install -g @vue/cli vue create vue-cli-demo
参考网址：
https://cli.vuejs.org/guide/creating-a-project.html#vue-create
查看全部 -
组件和实例的关系
每一个组件也是一个vue的实例。
在template中双引号可以在里面嵌套单引号，单引号不能嵌套单引号，会出现一些问题。
每一个项目都是由很多个组件组成的，也就是很多个vue实例组成的，因为每个组件就是vue实例，所以在组件中可以正常使用vue的一些方法，比如methods,watch等等。
每个组件都拥有自己的props、data、methods等等
注意：如果我们没有在vue根实例?下面定义模板，我们会按照挂载点寻找，并把下面的模板当作是模板。
查看全部 -
1.v-if="" : 控制DOM存在与否；
v-show="" : 控制DOM显示与否；
v-for="（item, index）of list" ：key="index": 控制循环列表的输出；（ 意为把 list 数组下的每一个元素赋值给变量名 item ,并把每个元素的下标存到对应的 index 中。PS : key 的值不可重复）
v-on（事件）的缩写是@
v-bind（绑定）的缩写是：
v-model（数据双向绑定）
2.通过this调用vue实例的data属性
this.list.push();往列表里添加值
如下this.inputValue=' '让提交后input框清空
3.computed: 计算属性
watch: 侦听器
methods: 定义按钮事件方法
data: 数据，值
template： 内容/模板
props:[''] 接受属性，参数
局部组件：通过components声明（在父组件中）
push() 方法 向对应函数添加值
4.在Vue里 ，每一个Vue组件，都是一个Vue实例 【实例=组件】；
Vue实例有的功能，Vue组件都拥有。
每个组件都是vue的实例；
每个实例的组成部分：
props、template、data、methods...
每一个组件都有一个template模板，如果没有写template，默认为挂载点下面的所有DOM标签作为模板。
5.vue中父组件向子组件传值是通过绑定属性的形式传递的，父组件可以监听子组件的绑定事件，子组件通过$emit 向外触发事件
监听子组件的自定义事件并绑定事件处理函数为handleDelete,即当子组件触发delete事件时，父组件监听到delete事件后，执行handleDelete函数，删除一个下标，模板发现少了一个下标，会把缺少下标的内容
还没学完，后续待更
查看全部 -
一句话来说: key值是为了虚拟dom的比对 .
展开来说: 页面上的标签都对应具体的虚拟dom对象(虚拟dom就是js对象), 循环中 ,如果没有唯一key , 页面上删除一条标签, 由于并不知道删除的是那一条! 所以要吧全部虚拟dom重新渲染, 如果知道key为x标签被删除掉, 只需要把渲染的dom为x的标签去掉即可!
描述其实不是很详细, 其中还有dom比对的过程,不过大概的意思已经描述出来了!
查看全部 -
改变安装路径 需要 cd … 不同盘符需要 cd /d F:/name
1）、npm install --global vue-cli 全局安装vue脚手架工具 vue-cli
2）、vue init webpack my-project
创建一个基于webpack模版的新项目 项目名称不能有大写字母
3）、cd my-project 进入到项目目录
4）、npm run dev 运行项目
查看全部 -
v-for：循环显示，最好加上：key = index,如果不需要排序可以使用index，如果需要排序或者做其他操作，不用index，存在问题。
v-if：隐藏与显示，v-show也可以实现隐藏与显示，但是当只需要不频繁切换隐藏显示时用v-if可以。当频繁切换时用v-show，会自动加上display：none，并没有从dom中清除，这样就 不用重新渲染，性能好。而v-if会使元素从dom中清除，每次切换都得重新渲染，加载。
list是数组的话使用 of ，前面的参数为（value,index）；
list是对象的话使用 in ，前面的参数为（value,key,index）;<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
这里官网上已经变成in了，感觉使用新写法比较好，第三个值才是索引查看全部
举报