自学日常记录
-
原始使用vue的方法:手动下载vue.js文件,引入到自己的文件中
-
使用nmp安装vue(我理解安装的意思就是把js文件下载到本地)
1、新建文件夹;
2、进入目录 执行npm init -y;
3、再执行npm install vue,这样npm就会把vue相关的依赖下载到工程里的目录了,我们再在需要使用vue.js的地方引入就行了 -
使用vue-cli(人称脚手架)创建规范的vue项目工程
1、安装vue-cli脚手架构建工具,在自定义目录下打开命令行工具输入:npm install -g vue-cli
说明:
如果是安装3以下版本的脚手架,命令npm install -g vue-cli@版本号
如果是安装3以上版本的脚手架,命令npm install -g @vue/cli@版本号
2、vue-cl脚手架方式创建,执行命令:vue init webpack pja (pja是你的项目名称),然后在对话框里输入相关相关的信息; -
vue computed watch机制
-
vue模板语法
-
全局组件 Vue.component()方法
示例:
<div id="faCounter">
<!--faCounter 就是组件元素counter的父元素,要把新建的vue实例绑定在这个父元素-->
<counter></counter>
<!--counter 就是新建的组件,也就是自定义的元素-->
</div>
<script>
//定义一个新的vue 组件。组件就是自定义的元素
Vue.component("counter",{
//1.组件名为"conter"; 2.data 写函数(必须是函数,和Vue构造方法的data不一样); 3.template 写组件的内容(元素和触发的事件)
data:function(){
return {count:0}
},
//template 是模板的意思,在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容
template:'<button v-on:click="count++">点击计算点击次数:{{count}}次</button>'
})
//定义一个新的vue 实例,用el 绑定组件元素(counter)的父元素 faCounter 元素上
new Vue({
el:"#faCounter"
})
</script>
-
局部组件
-
局部组件-组件模板
-
vue文件中 import from语法
1、Vue使用import … from …来导入组件,库,变量等。而from后的来源可以是js,vue,json。
2、若from的来源是文件夹,那么在package.json存在且设置正确的情况下,会默认加载package.json;若不满足,则加载index.js;若不满足,则加载index.vue。
最后推荐一个比较好的vue入门视频教程吧,我也是看这个视频入门的:
bilibilib Vue2.x极速入门(2020最新版)