VUE xxx

自学日常记录

原始使用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最新版)

自学日常记录

おすすめ