一、下载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:{}
监听某个数据的变化,一旦数据发生变化就去做相应的业务逻辑
十三、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 创建一个新项目
打开创建好的项目文件夹查看