一、创建第一个实例
1) 官网:https://cn.vuejs.org/
2) 安装
3) 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
a. 开发版本:包含完整的警告和调试模式
b. 生产版本:删除了警告 30.90KBmin + gzip
c. CDN:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
d. NPM|CLI...
4) 引入之后 new Vue({}) ;创建实例
a. 减少 dom 操作 着重于数据
b. 与标签绑定 el:dom 节点--- (element)
c. 提供标签需要的数据 data:{}
5) 挂载点模板与实例之间的关系
a. |
挂载点:vue 实例中 el:绑定的标签 |
vue 只会处理挂载点下面的内容 |
如：上述 el:’#test’ 挂载点就是 id=”test”的标签
b. 模板: 挂载点里面的所有标签内容 ---模板内容
a) 挂载点标签里面的模板内容
b) 通过 vue 实例设置 模板内容 template:
c. 实例: 绑定挂载点 el:”” 设置模板:template:”” 设置数据 data:{} 将模板数据与挂载点拼装成最终的展示效果
6) Vue 实例中的数据事件与方法
a. 数据 {{}} | v-text|v-html
b. 事件绑定 v-on:click="函数名" 函数定义在 vue 实例 methods:{函数名:function() {}}
修改模板内容 不需要 dom 操作标签 面向数据编程
c. |
v-on:click="函数名" |
简写 @click="函数名" |
7) Vue 中属性绑定和双向数据绑定
a. v-bind:属性名="属性值" 属性值一般定义在 vue 实例中
v-bind:属性名 简写成 :属性名
模板指令之后 属性值是一个 js 表达式
b. 双向数据绑定
a) 之前的绑定是单向绑定定义好数据之后 标签里面只能输出 不能修改数据
b) 双向绑定:标签里面输出定义好的数据标签里面的数据改变了 data:{}中的数据同步改变
8) Vue 中的计算属性和侦听器
a. 场景:某一个变量的值是通过其他变量计算得到的
<!--
fullName 是通过 firstName 和 lastName 两个变量计算的来 |
|
的 |
|
如果变量没改变下次调用 fullName 的时候调用的是缓存 |
|
的值
只有 当 A,B...变量改变了才会重新计算 fullName 的值 |
|
--> |
|
b. 侦听器监听某个数据发生的变化 同理下面代码可以直接侦听计算属性 fullName
9) V-if | v-show | v-for 指令
a. v-if 判断真假假:标签从 DOM 树删除真:在 DOM 树新增标签
b. v-show 为假的时候 标签加上 style=”display:none”; 标签不会从DOM树删除如若是频繁控制标签显隐 推荐 v-show 不会频繁操作 DOM 树性能较高
c. V-for 循环
二、todoList 功能开发
（1） 要求：
（2） 思路:
1) 绑定标签 在标签里面有输入框 button 提交按钮下面有 li 列表展示 schedule
2) Input 框双向数据绑定 v-model
3) button@click 事件 methods:{}
4) 数组存储 iunput 输入的数据 v-for 遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>vue</title>
<!-- script 标签引入 vue.js 最好在 head 头避免页面抖屏 -->
<script type="text/javascript" src="/static/index/js/vue.js"></script>
</head>
<body>
<pre> 简单的 todolist
</pre>
<div id="test" style="margin:auto ;"> <div>
<input type="" name="" v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#test" , data: { inputValue: "" , list: [],
},
methods: { handleClick: function() {
//把 input 输入的值 push 向数组尾部添加数据
// this.list.push(this.inputValue) ;
//unshift 向数组头部添加数据
this.list.unshift(this.inputValue) ;
//同时 清空 iuput 输入框
this.inputValue = '' ;
}
}
}) ;
</script>
</body>
</html>三、 todoList 组件拆分
（1）组件: 页面上的某一部分一个页面内容比较庞大 可以拆分成几部分某一部分就是一个组件单个组件维护简单
i）全局组件
ii） 局部组件
iii） todolist 拆分组件
<!DOCTYPE html>
|
iv） 组件与实例的关系
(1) 实例:new Vue 模板是 el:挂载点绑定下的标签内容
四、实现 todoList 的删除
（1）父|子组件通信
1>子->父 子组件发布信息 父组件订阅(监听)信息
<!DOCTYPE html> <html> <head> |
<meta charset="utf8" /> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <pre> 父组件|子组件交互父组件=>子组件 属性参数传递 在父组件模板内容中 ：content | :k 子组件中 props：[] 接受参数子组件->父组件 发布订阅模式 $this->$emit('delete',index) 子组件发布 delete 事件 父组件在模板内容中 @delete="" 订阅该事件 </pre> <div id='test'> <div> <input type="" name="" v-model="inputValue"> <button @click="handleClick">点击</button> </div> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item" :k="index" @delete="handleDelete"> <!-- 父组件中订阅(监听 delete 事件父组件执行 handleDelete 方法) --> </todo-item> </ul> </div> <script> <!-- 注册创建全局组件 // 通过 props:[] 接受传递进来的参数 Vue.component('todo-item',{ props:['k','content'] , template:"<li @click='handle'>{{k}}=>{{content}}</li>" , |
methods:{ // 点击子组件删除当前的 li 即删除父组件 list[]当前的记录需要子 组件与父组件通信 handle:function() { this.$emit('delete',this.k) ;//传参 当前记录的下标 } } }) ; new Vue({ el:"#test" , data:{ inputValue:'' , list:[] }, methods:{ handleClick:function() { this.list.unshift(this.inputValue) ; this.inputValue = '' ; }, handleDelete:function(k) { // 接受传过来的下标删除对应 list[]中的值 /* splice 删除|插入|替换 第一个参数:从第一个参数的位置第二个参数:删除一项第三个参数:插入|替换后的数据 (该参数无：实现删除功能 有：实现插入|替换功能) */ this.list.splice(k,1,'111111') ; } } }) ; </script> </body> </html> |