毕业设计网站代做多少钱,wordpress主题文件结构,全国通网站建设,使用wordpress建立个人网站目录
1. v-model 双向数据绑定
2. 事件修饰符
3. 路径别名
4. setup语法糖
4.1 语法糖的概念
4.2 setup语法糖
5. 配置代理服务器 1. v-model 双向数据绑定 v-model 双向数据绑定只能使用在表单标签#xff1b; v-model双向数据绑定原理#xff1a;采用 Object.de…目录
1. v-model 双向数据绑定
2. 事件修饰符
3. 路径别名
4. setup语法糖
4.1 语法糖的概念
4.2 setup语法糖
5. 配置代理服务器 1. v-model 双向数据绑定 v-model 双向数据绑定只能使用在表单标签 v-model双向数据绑定原理采用 Object.defineProperty进行数据劫持 结合发布订阅者模式实现数据更新视图改变视图改变数据更新。
templatedivdiv用户姓名input typetext name id v-modelusername //divdiv用户性别input typeradio namesex value男 v-modelsex /男inputtyperadionamesexvalue女v-modelsex/女/divbutton clicktijiao提交用户信息/button/div
/template
style
/style
script
import { ref } from vue;
export default {setup() {let username ref( );let sex ref(女);const tijiao () {console.log(用户信息 username.value);console.log(用户性别 sex.value);};return {username,tijiao,sex};}
};
/script2. 事件修饰符 在 Vue中的事件修饰符支持链式调用但是只有少数事件修饰符可以支持链式调用
.stop、 .prevent、 .self、.capture、 .once和 .passive这六个事件修饰符可以进行链式调用。其他事件修饰符如.native和.sync等则不支持链式调用。
1 .stop阻止事件向上冒泡
templatedivdiv classd1 clickd1Clickdiv classd2 click.stopd2Click/div/div/div
/template
style
.d1 {width: 120px;height: 120px;background-color: blue;
}
.d2 {width: 60px;height: 60px;background-color: rgb(255, 145, 0);
}
/style
script
export default {setup() {const d2Click () {console.log(事件2);};const d1Click () {console.log(事件1);};return {d1Click,d2Click};}
};
/script2 .prevent阻止标签默认行为发生。比如a标签的跳转form的默认提交行为。
templatediva hrefhttp://www.baidu.com click.preventd2Click百度一下/a/div
/template
style
/style
script
export default {setup() {const d2Click () {console.log(事件2);};const d1Click () {console.log(事件1);};return {d1Click,d2Click};}
};
/script3. 路径别名
路径别名是指在项目中定义的一些简短的路径用来代替复杂的长路径。通过使用路径别名可以减少代码中的重复冗余提高代码可读性和可维护性。
import http from /utlis/http;
创建项目时vite已经帮我们配置好了一个路径别名规则 在vue2和vue3通用它代表src这个目录的路径。写符号vue就会找到src目录。省去了../这种查找方式更便捷。 也可以在vite.config.js中自定义路径别名。 4. setup语法糖
4.1 语法糖的概念
语法糖Syntactic sugar是指在编程语言中提供的一种更简洁、更易读的语法形式用来表示相同的功能。它并不是引入新的功能只是为了提高编程的效率和可读性。语法糖让代码更易于写和理解虽然底层实现是一样的但使用语法糖可以让代码更简洁、更优雅。它可以隐藏一些冗长的细节使得程序员能够更容易地理解和编写代码。
4.2 setup语法糖
在script标签内部写入setup就可以使用setup语法糖了此时不需要在script内部写入口函数可以直接编写相关代码也不需要将变量和方法用return返回就可以直接在template标签内部使用。
script setup
import { ref } from vue;
import http from /utlis/http;
const count ref(0);
const setCount () {count.value;
};
// 2.这里不需要添加async修饰了配合App.vue中的Suspence可以直接使用await发送初始化请求了。
const data await http(/hgapi/live/cate/newRecList?offset0cate2wzrylimit5, GET);
console.log(data);
/script
5. 配置代理服务器
配置代理服务器也叫配置反向代理可以用来解决跨域的问题。在vite.config.js文件中可以按照以下格式自行配置代理服务器。 /api也就是下列代码中的/hgapi这个是可以自行定义的表示服务器要监听的前端请求接口路径监听的是路径开头不包含域名和端口。整体意思是代理服务器监听接口路径是否以/api开头的是就走这个代理服务器解决跨域。不是以/api开头就不走代理服务器当浏览器发请求如果没有携带域名默认浏览器会把当前服务器域名加上当前域名是http://localhost::5173当配置完代理服务器后再发送请求时请求地址就不要再写https://m.douyu.com/了直接跟后面的地址即可。
server: {proxy: { /hgapi: {target: https://m.douyu.com,//目标域名代理服务器localhost::5173换成target域名服务器之间的请求时不存在跨域的。changeOrigin: true,//允许切换域名},},},
