当前位置： 首页 > news >正文

廊坊哪里有做网站的营销型网站有哪些

news 2025/7/8 1:50:06
廊坊哪里有做网站的,营销型网站有哪些,网站文字格式,制作网站免费VUE vue是一个用于构建用户界面的渐进式框架 创建一个VUE实例 核心步骤： 准备容器引包（官网）-开发版本/生产版本创建一个vue实例 new vue()指定配置项->渲染数据 el指定挂载点（选择器）,指定管理的是哪个容器。dat…

VUE

vue是一个用于构建用户界面的渐进式框架

创建一个VUE实例

核心步骤：

  1. 准备容器
  2. 引包（官网）-开发版本/生产版本
  3. 创建一个vue实例 new vue()
  4. 指定配置项->渲染数据
    1. el指定挂载点（选择器）,指定管理的是哪个容器。
    2. 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>

插值表达式

  1. 作用

    利用表达式进行插值，将数据渲染到页面中

  2. 语法格式

    {{ 表达式 }}

  3. 注意点：

    1. 使用的数据要存在（data）
    2. 支持的是表达式，而非语句if… for
    3. 不能在标签属性里面使用

响应式特性

数据改变，视图会自动更新

如何访问或修改数据呢？

  1. 访问数据：实例.属性名
  2. 修改数据：“实例.属性名”=值

指令

指令就是带有v-前缀的特殊属性，不同属性对应不同的功能

v-html

​ v-html="表达式"动态设置元素innerHTML

v-show
  1. 作用：控制元素显示隐藏
  2. 语法：v-show=‘‘表达式’’ 值为true显示，false隐藏
  3. 原理：切换 display：none控制显示隐藏
  4. 场景：频繁切换显示隐藏的场景
v-if
  1. 作用：控制元素显示隐藏（条件渲染）
  2. 语法：v-if=“表达式” 表达式值为true显示，false隐藏
  3. 原理：基于条件判断，是否创建或移除元素节点
  4. 场景：要么显示，要么隐藏，不频繁切换场景
v-else v-else-if
  1. 作用：辅助v-if进行判断渲染
  2. 语法：v-else v-else-if=‘‘表达式’’
  3. 注意：需要紧挨着v-if一起使用
v-on

  1. 作用：注册事件 = 添加监听+提供处理逻辑

  2. 语法：v-on：事件名=‘‘内联语句’’

    ​ v-on：事件名=‘‘methods中的函数名’’

  3. 简写：@事件名

//内联语句方式
<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
  1. 作用：动态的设置html的标签属性→src url title …
  2. 语法：v-bind：属性名=“表达式”
  3. 简写：“v-bind：” 直接 “：+属性名”
<div id="app"><img v-bind:src="url">
</div>const app = new Vue({el:'#app',data:{url:'图片路径’}
})
v-for

  1. 作用：基于数据循环，多次渲染整个元素 →数组、对象、数字…

  2. 遍历数组语法：

    ​ 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

  1. key作用：给元素添加唯一标识，便于vue进行列表项的正确排序复用
  2. 注意点：
    1. key的值只能是字符串或数字类型
    2. key的值必须具有唯一性
    3. 推荐使用id作为key(唯一)，不推荐使用index作为key（会变化，不对应）
<li v-for="(item,index)in xxx" :key="唯一值"
v-model
  1. 作用：给表单元素使用，双向数据绑定→可以快速 获取 或 设置 表单元素内容
    1. 数据变化 → 视图自动更新
    2. 视图变化 → 数据自动更新
  2. 语法：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>

指令修饰符

通过 “.” 指明一些指令的后缀，不同后缀封装了不同的处理操作 → 简化代码

  1. 按键修饰符

    @keyup.enter → 键盘回车监听

  2. v-model修饰符

    v-model.trim → 去除首尾空格

    v-model.number → 转数字

  3. 事件修饰符

    @事件名.stop → 阻止冒泡

    @事件名.prevent → 阻止默认行为

v-bind-操作class

语法 :class=“对象/数组”

  1. 对象→ 健就是类名，值就是布尔值。如果值为true，有这个类；否则没有这个类

    <div class="box" :class="{类名1: 布尔值 , 类名2: 布尔值}"></div>

    适用场景：一个类名，来回切换

  2. 数组→ 数组中所有的类，都会添加到盒子上，本质就是一个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

基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

  1. 在computed配置项中，一个计算属性对应一个函数
  2. 使用起来和普通属性一样使用 {{ 计算属性名 }}
<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计算属性：

  1. 作用：封装了一段对于数据的处理，求得一个结果。
  2. 语法：写在computed配置项中。作为属性，直接使用 → this.计算属性 {{计算属性}}
  3. 缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算，并再次重新计算。

methods方法：

  1. 作用：给实例提供一个方法，调用以处理业务逻辑
  2. 语法：写在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侦听器（监视器）

作用：监视数据变化，执行一些业务逻辑或异步操作

语法：

  1. 简单写法 → 简单类型数据，直接监视
data:{words:'苹果',obj:{words:'苹果'}
},watch:{//该方法会在数据变化时，触发执行数据属性名(newValue,oldValue){一些业务逻辑 或 异步操作}，'对象.属性名'(newValue,oldValue){一些业务逻辑 或 异步操作}
}
  1. 完整写法 →添加额外配置项
    1. deep: true 对复杂类型深度监视
    2. immediate: true 是否立即执行一次handler方法
data:{obj:{words: '苹果',lang: 'italy'}
},
watch:{//watch 完整写法数据属性名：{deep：true，//深度监视handler(newValue){console.log(newValue)}}
}

水果购物车案例

业务技术总结：

  1. 渲染功能：v-if/v-else v-for :class
  2. 删除功能：点击传参，filter过滤覆盖原数组
  3. 修改个数：点击传参，find找对象
  4. 全选反选：计算属性computed 完整写法get/set
  5. 统计选中的总价和总数量：计算属性computed reduce条件求和
  6. 持久化到本地：watch监视，localStorage，JSON.stringify，JSON.parse
http://www.ds6.com.cn/news/10696.html

相关文章：

  • win2008 建立网站河北seo
  • 建设厅网站上企业登录自媒体是什么
  • 深圳网站建设服务公司电商培训内容有哪些
  • 有没有做网站的团队如何注册网站平台
  • 网站空间选linux郑州网络seo
  • 门户网站与搜索引擎的区别深圳开发公司网站建设
  • 大型购物网站如何做好线上推广和引流
  • 怎样做网站认证新网站秒收录技术
  • 西宁网站建设报价快速提高排名
  • 假网站怎么做呢五种常用的网站推广方法
  • 白色网站源码免费推客推广平台
  • 昌吉州回族自治州建设局网站设计网站推荐
  • 建设网站的主要设备上海优化网站seo公司
  • 兰州网络推广方法牡丹江seo
  • 高校网站建设规范免费个人主页网站
  • 房产中介网站建设的目的网站代运营价格
  • 网站建设有哪些特点如何制作自己的网站?
  • 网站建设如何做用户名密码网站seo课设
  • 长安商城网站建设爱站网ip反域名查询
  • 珙县网站建设做网站公司哪家正规
  • 怎么做英文网站最新新闻热点大事件
  • 山东锦华建设集团有限公司网站模板建站代理
  • 表格比较多得网站这么做响应式创建网站花钱吗
  • 百元做网站优化网站教程
  • 湘潭做网站价格品牌磐石网络三明网站seo
  • 高质量免费的网站网络优化的意义
  • 做家居的网站网络口碑营销案例分析
  • 哈尔滨网站建设推广公司西安seo诊断
  • 做网站管理员需要哪些知识宁德市地图
  • 浏览器主页被篡改2345邵阳seo排名