一个网站有个前端后端怎么做,东营本地网站有哪些,ssh框架做音乐网站,百度云盘搜索引擎入口其实更多知识点已经在Vue.js官网十分清楚了#xff0c;大家也可以去官网进行更细节的学习
https://cn.vuejs.org/
说明#xff1a;目前最新是Vue3版本的#xff0c;但是Vue2已经深得人心#xff0c;所以就是可以支持二者合用。它们最大的区别就是Vue3是组合式API#xf…其实更多知识点已经在Vue.js官网十分清楚了大家也可以去官网进行更细节的学习
https://cn.vuejs.org/
说明目前最新是Vue3版本的但是Vue2已经深得人心所以就是可以支持二者合用。它们最大的区别就是Vue3是组合式API而Vue2是选项式API。还有就是目前并没有使用npm、pnpm、yarn等构建工具创建Vue而是使用全局构建版的 Vue
script srchttps://unpkg.com/vue3/script 目录
其实更多知识点已经在Vue.js官网十分清楚了大家也可以去官网进行更细节的学习
1、基本用法
2、内容渲染
2.1 组合式
2.2 选项式
3、响应式
3.1 组合式
3.2 选项式
4、计算属性
5、属性绑定
6、JS表达式
7、条件渲染
8、事件绑定
9、列表渲染
10、双向绑定
11、双向绑定案例 1、基本用法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/script
/head
bodydiv idapp{{msg}}h1{{web.title}}/h1h1{{web.url}}/h1/div
/body
script//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive}Vue //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const webVue.reactive({ //创建一个响应式的数据对象web里面包含title和url两个属性title:HNUCM,url:www.hnucm.edu.cn})//返回数据return{msg:success,web}}}).mount(#app)//将Vue 应用程序挂载到app元素上
/scriptscript//什么是解构从一个数组或者对戏那个中把值提取出来赋给新的变量//数组解构const number[1,2,3]const [one,two,three]numberconsole.log(one,two,three)//对象解构const person{name:fanhuling,age:20}const {name,age}personconsole.log(name,age)//函数参数解构function introduce({name,age}){console.log(My name is ${name},I am ${age} years old)}introduce(person)/script/html 2、内容渲染
2.1 组合式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/script
/headbodydiv idapp!-- 文本插值表达式 --p{{username}}/pp{{age}}/pp{{desc}}/p!-- v-html指令 显示HTML内容 --p v-htmldesc/p/div
/bodyscript//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive}Vue //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const usernamefanhuilingconst age20const desca href www.baidu.com百度一下/a//返回数据return{username,age,desc}}}).mount(#app)//将Vue 应用程序挂载到app元素上
/script/html
2.2 选项式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/script
/head
bodydiv idapp!-- 文本插值表达式 --p{{username}}/pp{{age}}/pp{{desc}}/p!-- v-html指令 显示HTML内容 --p v-htmldesc/p/div
/body
scriptconst vm{data:function(){return{username:fanhuiling,age:20,desc:a hrefwww.baidu.com百度一下/a}}}const appVue.createApp(vm)app.mount(#app)
/script/html 3、响应式
3.1 组合式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/script
/head
bodydiv idappbutton clickincretement增加/buttonp{{count}}/pp{{state.counter}}/p/div
/body
scriptconst {createApp,reactive,ref}Vue//ref 适用于基本类型字符串、数字、布尔值//reactive 适用于对象、数组等复合类型createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const countref(0)const stateref({counter:0})//将ref 改为reactive后counter会和count一起增加//箭头函数const incretement (){count.value;state.counter;}return{count,incretement,state}}}).mount(#app)//将Vue 应用程序挂载到app元素上/script/html3.2 选项式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/script
/head
bodydiv idappbutton onclickincretement增加/buttonp{{count}}/p/div
/body
scriptconst vm{data:function(){//const countVue.ref(0)return{count:1} },methods: {incretement(){this.count;} }}const appVue.createApp(vm)app.mount(#app)
/script/html 4、计算属性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/script
/head
bodydiv idapph1{{add()}}/h1h1{{add()}}/h1h1{{sum}}/h1h1{{sum}}/h1/div
/body
scriptconst {createApp,reactive,ref,computed}Vue//ref 适用于基本类型字符串、数字、布尔值//reactive 适用于对象、数组等复合类型createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const data reactive({x:10,y:20})//无缓存的方法const add(){console.log(add)return data.xdata.y;}//有缓存的方法//计算属性根据依赖响应式数据变化来决定是否重新计算const sumcomputed((){console.log(sum)return data.xdata.y})return {data,add,sum}}}).mount(#app)//将Vue 应用程序挂载到app元素上/script/html 5、属性绑定
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 1. 导入vue.js的脚本文件 --script srchttps://unpkg.com/vue3/dist/vue.global.js/script
/headbodydiv idappdiv :style{width:h,height:h,backgroundColor:bgc}/div/div
/body
script// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const wref(500px);const href(500px);const bgcref(red);// 返回数据return {w,h,bgc}}}).mount(#app) // 将 Vue 应用程序挂载到app元素上
/script/html 6、JS表达式
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 1. 导入vue.js的脚本文件 --script srchttps://unpkg.com/vue3/dist/vue.global.js/script
/headbodydiv idappp{{number1}}/pp{{ok ?True:False}}/p!-- 翻转字符串先以分割为数组数组翻转然后在结合 --p{{msg.split().reverse().join()}}/p p :idlist-id/pp{{user.name}}/p/div
/body
script// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const number0;const okref(true);const msgABCconst id3const user{name:fanhuiling}return {number,ok,msg,id,user}}}).mount(#app) // 将 Vue 应用程序挂载到app元素上
/script/html 7、条件渲染
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://unpkg.com/vue3/dist/vue.global.js/script
/headbodydiv idappbutton clickflag!flag开关/button!-- v-if 当为false时会从真实dom删除 --p v-ifflag请求成功被v-if控制/p p v-showflag请求成功被v-show控制/pp v-if type A类型A/pp v-else-iftype B类型B/pp v-else不是A和B/p/div
/bodyscript//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive,ref}Vue //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const flagref(true)const typeref(C)return{flag,type}}}).mount(#app)//将Vue 应用程序挂载到app元素上
/script/html 8、事件绑定
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 1. 导入vue.js的脚本文件 --script srchttps://unpkg.com/vue3/dist/vue.global.js/script
/headbodydiv idapppcount的值为{{count}}/pbutton v-on:clickaddCount1/buttonbutton clickaddCount1/button/div
/body
script// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const countref(0)const addCount(){count.value;}// 返回数据return {count,addCount}}}).mount(#app) // 将 Vue 应用程序挂载到app元素上
/script/html 9、列表渲染
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 1. 导入vue.js的脚本文件 --script srchttps://unpkg.com/vue3/dist/vue.global.js/script
/headbodydiv idapp!-- 添加数据 --input typetext v-modelname/button clickaddUser 添加/buttonulli v-foruser in userlist姓名{{user.name}}/lili v-foruser,index in userlist :keyuser.idinput typecheckbox/索引{{index}}姓名{{user.name}}/li/ul/div
/body
script// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const userlistreactive([{id:1,name:Tom},{id:2,name:Jerry},{id:3,name:mary}])const nextIdref(4)const nameref()const addUser(){userlist.unshift({id:nextId.value,name:name.value})name.value;nextId.value;}// 返回数据return {userlist,nextId,name,addUser}}}).mount(#app) // 将 Vue 应用程序挂载到app元素上
/script/html 10、双向绑定
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 导入vue.js的脚本文件 --script srchttps://unpkg.com/vue3/dist/vue.global.js/script
/headbodydiv idappinput v-modelmsg placeholder输入文本/p{{msg}}/p/div
/body
script// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const msgref(测试)// 返回数据return {msg}}}).mount(#app) // 将 Vue 应用程序挂载到app元素上
/script/html 11、双向绑定案例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 1. 导入vue.js的脚本文件 --script srchttps://unpkg.com/vue3/dist/vue.global.js/script
/headbodydiv idapph3文本框{{data.text}}/h3h3单选框{{data.radio}}/h3h3复选框{{data.checkbox}}/h3h3下拉框{{data.select}}/h3h3记住密码{{data.remember}}/h3!-- 单向数据绑定时数据发生变化视图会自动更新但是手动修改input的值数据不会自动更新 --单向数据绑定input typetext :valuedata.text/br!-- 双向数据绑定当数据发生变化时视图会自动更新手动修改input的值数据也会自更新 --双向数据绑定input typetext v-modeldata.text/brbrbrinput typeradio v-modeldata.radio value1听音乐input typeradio v-modeldata.radio value2写代码brbrinput typecheckbox v-modeldata.checkbox valuea听音乐input typecheckbox v-modeldata.checkbox valueb写代码input typecheckbox v-modeldata.checkbox valuec刷B站brbrselect v-modelselectoption value 请选择/optionoption valueA 听音乐/optionoption valueB 写代码/optionoption valueC 刷B站/option/selectbrbrinput typecheckbox v-modeldata.remember记住密码/div
/body
script// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const datareactive({text:fanhuiling ,//文本框radio:,checkbox:[],select:,remember:false //单个复选框--功能是记住密码})// 返回数据return {data}}}).mount(#app) // 将 Vue 应用程序挂载到app元素上
/script/html
