视图强制渲染
<div class="app">
<h1>{{obj}}</h1>
<button @click="fn1">添加age</button>
<button @click="fn2">删除age</button>
<h1>{{arr}}</h1>
<button @click="add">添加car</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
obj: {
name: 'zhangsan'
},
arr: [{
car: 'bmw'
}]
},
methods: {
fn1() {
第一种$set()方法
/* this.$set(this.obj,'age',30) */
第二种this.$forceUpdate()方法 强制刷新视图
this.obj.age = 30;
this.$forceUpdate()
},
fn2() {
/* this.$delete(this.obj,'age') */
delete this.obj.age;
this.$forceUpdate()
},
add() {
/* this.$set(this.arr[0],'car2','benz') */
this.arr[0].car2 = 'benz';
this.$forceUpdate()
}
},
})
组件插槽
<div class="app">
具名插槽
<div>
<artice>
slot='' '' 对应下面的位置
<h2 slot="head">标题：论秦淮河为何如此？</h2>
<button slot="foot">原来如此</button>
</artice>
</div>
</div>
<template id="art">
<div>
<slot name='' ''>对应上面上面的值
<slot name="head"></slot>
<h3>国足在上游洗脚</h3>
<slot name="foot"></slot>
</div>
</template>
<script>
new Vue({
el: '.app',
components: {
artice:{
template:'#art'
}
}
})
</script>
脚手架的创建
1新建文件夹 取名webapp-vue，在文件夹内使用npm init -y 新建一个package.json文件
2.使用npm i -g @vue/cli 全局（整个电脑）安装一个脚手架工具
3.输入vue -V检查vuecli脚手架版本 发现报错
输入set-ExecutionPolicy RemoteSigned再根据提示输入大写的Y回车
4.然后在点击任务栏的输入框 右击选择命令窗口，选择以管理员身份运行
5.找到你的项目路径，复制在命令行窗口中输入 cd 加上你的路径
6.输入vue -V检查一下脚手夹版本发现显示版本号 表示ok
7.输入 vue create 项目名称 选择vue2（默认vue2）直接按回车
8.启动项目
输入 cd 项目名称 打开项目所在的文件夹
进来之后 输入 npm run serve 启动项目
输入 npm run built 启动开发模式
脚手架目录
dist 打包后生成的文件夹
node_modeles 项目所需要的依赖文件
public 项目所需要的图片，假的数据json文件，包括index.html
src 资源文件
assets 放置图片的路径
components组件防止的路径
app.vue 入口的首个vue文件
man.js 首个入口的js文件
gitignore是用来告诉脚手架有哪些文件不需要被上传到git仓库中
babel.config 把es6，es7转换成兼容的es5
pack.json 项目的表述，启动命令
