vue框架基本使用

一、下载vue.js 

https://cn.vuejs.org/ 学习-》教程-》安装 开发版本

二、路径

将vue.js放置在D:\phpStudy\WWW\bike\public\static\index\style 下面，admin模块中建立的config定义的/Public指向http://127.0.0.1/bike/public/static/admin/  

三、页面引入

四、创建一个vue实例，来使用vue

五、控制器assign过来的值调用：

六、挂载点与模板

七、v-text与v-html用法（数据）

v-html会解析内容中的<h1>等标签  而v-text则不会

八、v-on：click 点击事件 (v-on:可简写为@ 如：@click)

点击后弹窗：

点击后更换content变量，页面自动跟着变化：

九、属性v-bind:tiltle(可简写为   :title)

当鼠标放在hello world上时会显示 属性：

十、双向数据绑定 v-model=“content”

十一、计算属性 computed：{}

用于对数据进行处理，返回一个新数据，在两个输入框中的数据没发生改变时，函数会使用缓存值，只有当数据发生改变的时候才会重新计算

十二、侦听器 watch：{}

监听某个数据的变化，一旦数据发生变化就去做相应的业务逻辑 

更简便的方法：监听计算属性name即可

十三、v-if 与 v-show 

区别：v-show是使用的display进行隐藏，而v-if是创建与销毁，当用于隐藏或显示时v-show性能好一些，而v-if需要频繁创建，如果是用于只有一次判断的话使用v-if是更好的选择。

十四、v-for 循环

十五、todoList的实现

十六、组件的拆分

列表组件拆分后，通过在各处调用这个组件，传递数值即可实现列表

十七、组件与实例的关系

每一个组件就是一个vue的实例，在组件中可以定义methods方法并且调用

实现删除以及组件之间的通信：

十八、vue-cli的安装

首先安装npm，npm是node.js的一部分，所以直接安装node，在node官网点击下载：

cmd命令下输入：node --version  查看是否有版本号即代表安装成功

cmd命令下输入：npm install -g @vue/cli  安装全局vue-cli

cmd命令下输入：vue create hello-world 创建一个新项目

打开创建好的项目文件夹查看