廊坊哪里有做网站的如何自己制作网站
VUE
vue是一个用于构建用户界面的渐进式框架
创建一个VUE实例
核心步骤：
- 准备容器
- 引包（官网）-开发版本/生产版本
- 创建一个vue实例 new vue()
- 指定配置项->渲染数据
- el指定挂载点（选择器）,指定管理的是哪个容器。
- data提供数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<div id="app"><!-- 编写渲染的代码逻辑 --><h1>{{ msg }}</h1><a>{{count}}</a>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>//一旦引入了vuejs核心包，在全局环境，就有了vue构造函数const app = new Vue({el: '#app',data:{msg: 'Helloyyh',count: 666}})
</script>
</body>
</html>
插值表达式
-
作用
利用表达式进行插值，将数据渲染到页面中
-
语法格式
{{ 表达式 }}
-
注意点：
- 使用的数据要存在（data）
- 支持的是表达式，而非语句if… for
- 不能在标签属性里面使用
响应式特性
数据改变，视图会自动更新
如何访问或修改数据呢？
- 访问数据：实例.属性名
- 修改数据：“实例.属性名”=值
指令
指令就是带有v-前缀的特殊属性，不同属性对应不同的功能
v-html
v-html="表达式"动态设置元素innerHTML
v-show
- 作用：控制元素显示隐藏
- 语法：v-show=‘‘表达式’’ 值为true显示，false隐藏
- 原理：切换 display：none控制显示隐藏
- 场景：频繁切换显示隐藏的场景
v-if
- 作用：控制元素显示隐藏（条件渲染）
- 语法：v-if=“表达式” 表达式值为true显示，false隐藏
- 原理：基于条件判断，是否创建或移除元素节点
- 场景：要么显示，要么隐藏，不频繁切换场景
v-else v-else-if
- 作用：辅助v-if进行判断渲染
- 语法：v-else v-else-if=‘‘表达式’’
- 注意：需要紧挨着v-if一起使用
v-on
-
作用：注册事件 = 添加监听+提供处理逻辑
-
语法：v-on：事件名=‘‘内联语句’’
v-on：事件名=‘‘methods中的函数名’’
-
简写：@事件名
//内联语句方式
<body><div id="app"><button @click="count--">-</button> //简写<span>{{ count }}</span><button v-on:click="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>//一旦引入了vuejs核心包，在全局环境，就有了vue构造函数const app = new Vue({el: '#app',data:{count: 100}})</script>
</body>
//methods方式
<body><div id="app"><button @click="fn">切换显示隐藏</button><h1 v-show="isshow">杨雨涵</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app1 = new Vue({el: '#app',data:{isshow: true},methods:{fn(){//让提供的所有methods中的函数，this都指向当前实例//app1 === thisapp1.isshow = !app1.isshow}}})</script>
</body>
v-on调用传参
<body><div id="app"><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button><br><p>银行卡余额：{{ money }}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app1 = new Vue({el: '#app',data:{money: 100},methods:{buy(price){this.money-=price;}}})</script>
</body>
v-bind
- 作用：动态的设置html的标签属性→src url title …
- 语法：v-bind：属性名=“表达式”
- 简写：“v-bind：” 直接 “：+属性名”
<div id="app"><img v-bind:src="url">
</div>const app = new Vue({el:'#app',data:{url:'图片路径’}
})
v-for
-
作用：基于数据循环，多次渲染整个元素 →数组、对象、数字…
-
遍历数组语法：
v-for=“(item,index) in 数组”、
item每一项，index下标
<body><div id="app"><ul><li v-for="(item, index) in list">{{ item }}-{{ index }}</li></ul><ul><li v-for="(item) in list">{{ item }}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app1 = new Vue({el: '#app',data:{list:['西瓜','苹果','鸭梨','榴莲']}})</script>
</body>
v-for中的key
- key作用：给元素添加唯一标识，便于vue进行列表项的正确排序复用
- 注意点：
- key的值只能是字符串或数字类型
- key的值必须具有唯一性
- 推荐使用id作为key(唯一)，不推荐使用index作为key（会变化，不对应）
<li v-for="(item,index)in xxx" :key="唯一值"
v-model
- 作用：给表单元素使用，双向数据绑定→可以快速 获取 或 设置 表单元素内容
- 数据变化 → 视图自动更新
- 视图变化 → 数据自动更新
- 语法：v-model = ‘变量’
<body><div id="app">账户：<input type="text" v-model="username"><br><br>密码：<input type="password" v-model="password"><br><br><button @click="login">登录</button><button @click="reset">重置</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app1 = new Vue({el: '#app',data:{username:'',password:''},methods:{login (){console.log(this.username,this.password)},reset (){this.username = ''this.password = ''}}})</script>
</body>
指令修饰符
通过 “.” 指明一些指令的后缀，不同后缀封装了不同的处理操作 → 简化代码
-
按键修饰符
@keyup.enter → 键盘回车监听
-
v-model修饰符
v-model.trim → 去除首尾空格
v-model.number → 转数字
-
事件修饰符
@事件名.stop → 阻止冒泡
@事件名.prevent → 阻止默认行为
v-bind-操作class
语法 :class=“对象/数组”
-
对象→ 健就是类名，值就是布尔值。如果值为true，有这个类；否则没有这个类
<div class="box" :class="{类名1: 布尔值 , 类名2: 布尔值}"></div>适用场景：一个类名，来回切换
-
数组→ 数组中所有的类，都会添加到盒子上，本质就是一个class列表
<div class="box" :class="[类名1，类名2，类名3]"></div>使用场景：批量添加或删除类
<body><div id="app"><ul><li v-for="(item,index) in list" :key="item.id" @click="activeindex = index"><a :class="{active:index === activeindex}" href="#">{{item.name}}</a></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app1 = new Vue({el: '#app',data:{activeindex: 0, //记录高亮list:[{id:1,name:'京东秒杀'},{id:2,name:'每日特价'},{id:3,name:'品类秒杀'}]}})</script>
</body>
v-bind-操作style
语法 :style=“样式对象”
<div class="box" :style="{css属性名1：css属性值, css属性名2: css属性值}"></div>
适用场景：某个具体属性的动态设置
<body><div id="app"><div class="progress"><div class="inner" :style="{width: percent +'%'}"><span>{{percent}}%</span></div></div><button @click="percent = 25">设置25%</button><button @click="percent = 50">设置50%</button><button @click="percent = 75">设置75%</button><button @click="percent = 100">设置100%</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app1 = new Vue({el: '#app',data:{percent:25}})</script>
</body>
计算属性computed
基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
- 在computed配置项中，一个计算属性对应一个函数
- 使用起来和普通属性一样使用 {{ 计算属性名 }}
<body><div id="app"><h3>小黑的礼物清单</h3><table><tr><th>名字</th><th>数量</th></tr><tr v-for="(item, index) in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}个</td></tr></table><!-- 目标：统计求和，求得礼物总数 --><p>礼物总数：{{ totalCount }} 个</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 现有的数据list: [{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]},computed: {totalCount () {// 基于现有的数据，编写求值逻辑// 计算属性函数内部，可以直接通过 this 访问到 app 实例// 需求：对 this.list 数组里面的 num 进行求和 → reducelet total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>
</body>
computed 计算属性 VS methods方法
computed计算属性：
- 作用：封装了一段对于数据的处理，求得一个结果。
- 语法：写在computed配置项中。作为属性，直接使用 → this.计算属性 {{计算属性}}
- 缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算，并再次重新计算。
methods方法：
- 作用：给实例提供一个方法，调用以处理业务逻辑
- 语法：写在methods配置项中。作为方法，需要调用 → this.方法名() {{方法名()}} @事件名=“方法名”
计算属性的完整写法
计算属性默认的简写，只能读取访问，不能修改。若要修改，需要写计算属性的完整写法。
computed:{计算属性名:{get(){一段代码逻辑return 结果}，set(修改的值){一段代码逻辑}
}}
<body><div id="app">姓：<input type="text" v-model="firstName"> +名：<input type="text" v-model="lastName"> =<span>{{ fullName }}</span><br><br><button @click="changeName">改名卡</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: '刘',lastName: '备',},methods: {changeName () {this.fullName = '黄忠'}},computed: {// 简写 → 获取，没有配置设置的逻辑// fullName () {// return this.firstName + this.lastName// }// 完整写法 → 获取 + 设置fullName: {// (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）// 会将返回值作为，求值的结果get () {return this.firstName + this.lastName},// (2) 当fullName计算属性，被修改赋值时，执行set// 修改的值，传递给set方法的形参set (value) { this.firstName = value.slice(0, 1)this.lastName = value.slice(1)}}}})</script>
</body>
watch侦听器（监视器）
作用：监视数据变化，执行一些业务逻辑或异步操作
语法：
- 简单写法 → 简单类型数据，直接监视
data:{words:'苹果',obj:{words:'苹果'}
},watch:{//该方法会在数据变化时，触发执行数据属性名(newValue,oldValue){一些业务逻辑 或 异步操作}，'对象.属性名'(newValue,oldValue){一些业务逻辑 或 异步操作}
}
- 完整写法 →添加额外配置项
- deep: true 对复杂类型深度监视
- immediate: true 是否立即执行一次handler方法
data:{obj:{words: '苹果',lang: 'italy'}
},
watch:{//watch 完整写法数据属性名：{deep：true，//深度监视handler(newValue){console.log(newValue)}}
}
水果购物车案例
业务技术总结：
- 渲染功能：v-if/v-else v-for :class
- 删除功能：点击传参，filter过滤覆盖原数组
- 修改个数：点击传参，find找对象
- 全选反选：计算属性computed 完整写法get/set
- 统计选中的总价和总数量：计算属性computed reduce条件求和
- 持久化到本地：watch监视，localStorage，JSON.stringify，JSON.parse