Vue.js前端开发实战总结（1）

什么是Vue

Vue是一套用于构建用户界面的渐进式框架，与其他大型框架相比，Vue被设计为可以自底向上逐层应用。

Vue的数据驱动是通过MVVM（Model-View-ViewModel）模式来实现的，其基本工作原理如下：

Vue的基本工作原理

一、Vue体验

<!-- {{变量，在data中出现的变量}}插值表达式 -->
<div id="app">{{msg}}</div><!-- 第一步引入 -->
<script src="js/vue.js"></script>
<script>// new Vue实例化对象  指的就是MVVM中的VM(把视图和数据联系起来)new Vue({// el绑定的元素el:'#app',// data放置的是数据  指的就是MVVM中的M(model数据)data:{msg:"hello vue"}})
</script>

二、Vue相关知识

<div id="app">{{msg}}</div>{{a}}<script src="js/vue.js"></script>
<script>
new Vue 进行实例化对象  把视图和数据联系起来new Vue({// 绑定app内部可以使用vue的语法// 可以通过id名、类名(如果有多个，只绑定一个)、标签名// 不能绑定html或者body// 绑定一般建议通过idel: '#app',data: {msg: "111",a: '222'}})
</script>

三、插值表达式

<div id="app">{{}} 插值表达式 内部可以放置变量、表达式、函数{{msg}}<br>{{1+1}}<br>{{1+3/2+45}}<br><!-- 产生随机数0-1之间的随机数 -->{{Math.random()*100}}<br>
</div>

四、v-on

<div id="app"><!-- v-on:事件类型(click、mouseenter、mouseleave)="方法()" --><!-- 点击按钮，交换button和p的内容 --><!-- vue中一般想着控制数据，而不是标签 --><!-- <div v-html="con" v-on:click="change()">按钮</div> --><!-- <div v-html="msg" v-on:click="change()">文字</div> --><button v-on:click="change()">{{btn}}</button><p>{{text}}</p>
</div><script src="js/vue.js"></script>
<script>new Vue({el: '#app',data: {// con: '<button>按钮</button>',// msg: '<p>文字</p>'btn:'按钮',text:'文本'},// methods放置函数或者方法methods: {// 函数名(){执行代码}change() {// 获取数据 this.data中的变量名// 修改数据 this.data中的变量名="所要修改的值"// 交换两个变量的值// var t = this.con;// this.con=this.msg;// this.msg=t;var t = this.btn;this.btn=this.text;this.text=t;}}})
</script>

五、v-html、v-text

<div id="app">{{msg}}<br><!-- 插值表达式不能识别标签，把标签当作普通的文本处理 -->{{con}}<br><!-- v-html和v-text都可以控制标签的内容v-html可以识别标签 有xss风险v-test不能识别标签--><div v-html="con"></div><div v-test="con"></div>
</div><script src="js/vue.js"></script>
<script>new Vue({el: '#app',data: {msg: 'hello Vue',con: '<h1>标题</h1>'}})
</script>

六、v-if

<div id="app"><!-- v-if控制的是标签是否存在 v-if="条件" 条件可以是一个变量或者表达式为真的时候，存在。否则不存在--><p v-on:click="change()">控制器</p><!-- v-if存在 else不存在 v-if和else紧挨着 --><button v-if="show">按钮</button><button v-else>按钮1</button>
</div><script src="js/vue.js"></script>
<script>new Vue({el: "#app",data: {show: true},methods: {change() {this.show = !this.show}}})
</script>

七、v-else-if

<div id="app"><button v-on:click="change()">按钮</button><!-- if控制标签是否存在 --><!-- 可以使用else if语句 --><div v-if="msg==1">1</div><div v-else-if="msg==2">2</div><div v-else-if="msg==3">3</div><div v-else-if="msg==4">4</div><div v-else>else</div>
</div><script src="js/vue.js"></script>
<script>new Vue({el: '#app',data: {msg: 1},methods: {change() {this.msg++}}})
</script>

八、v-show

<!-- v-show控制的是标签显示和隐藏 可以放置变量或者表达式 true显示false隐藏 -->
<div id="app"><button v-on:click="change()">按钮</button><p v-show="1==2"></p><p v-show="s"></p>
</div><script src="js/vue.js"></script>
<script>new Vue({el: '#app',data: {s: false},methods: {change() {this.s = !this.s}}})
</script>

九、v-bind（其一）

<!-- vue的核心就是控制数据 -->
<!-- v-bind控制标签属性 可以放在标签后面的都称为标签属性  <标签 k="v" k="v"> src class -->
<!-- v-bind:属性="变量、表达式" -->
<div id="app"><!-- v-on:click/mouseenter/mouseleave --><!-- 鼠标移入一张图片，鼠标移出另外一张 --><img v-bind:src="src" v-on:mouseenter="enter()" v-on:mouseleave="leave()">
</div><script src="js/vue.js"></script>
<script>new Vue({el: '#app',data: {src: './img/1.jpeg'},methods: {enter() {this.src = './img/2.jpeg'},leave() {this.src = './img/1.jpeg'}}})
</script>

v-bind（其二）

<!--v-bind:属性="值"  该值是一个变量v-bind:属性="[变量1,变量2]"v-bind:属性="{'属性的值':表达式/变量, '属性的值':表达式/变量}"属性的值是否存在由表达式/变量的值决定
-->
<div id="app"><!-- 类名就是one --><button class="one">1111</button><!-- 类名应该是变量one对应的值 --><button v-bind:class="one">111</button><!-- 类名应该是变量 one和two对应的值 --><button v-bind:class="[one,two]">333</button><button v-bind:class="{'one':show,'two':1==1}">555</button>
</div><script src="js/vue.js"></script>
<script>new Vue({el: '#app',data: {one: 'two',two: 'h',show: true}})
</script>

十、v-for

<div id="app"><ul><!-- 所要复制的标签上增加v-for --><!-- v-for="(数组元素,下标) in 数组" 遍历 动态创建标签 --><li v-for="(it,ind) in list"><h5>{{it}}</h5><p>{{ind}}</p></li></ul>
</div><script src="js/vue.js"></script>
<script>new Vue({el: '#app',data: {list: ['聚焦2022年国家网络安全宣传周', '北京昨增14例本土确诊:均涉学校','“天下第一”华西村或临破产?', '渡难关泸定安', '渡难关泸定安', '渡难关泸定安', '渡难关泸定安', '渡难关泸定安', '渡难关泸定安']}})
</script>

十一、v-model

<div id="app"><!-- input单行输入框 textarea多行输入框 --><!--  v-model可以用来获取表单元素的值，双向数据绑定 表单元素的值有变化，会触发变量的值有变化变量的值有变化，表单元素的值也会有变化--><input type="text" v-model="val"><!-- <textarea name="" id=""></textarea> --><br><br><button v-on:click="change()">修改数据</button>{{val}}
</div><script src="js/vue.js"></script>
<script>new Vue({el:'#app',data:{val:''},methods:{change(){this.val+='h'}}})
</script>

十二、指令缩写

<div id="app"><!--  v-on:事件类型简写为 @事件类型v-bind:属性 简写为 :属性--><button @click="change()" :class="one">按钮</button>
</div>

十三、组件

<div id="app"><!-- 第一步书写占位符 占位符名字自己定义不能和标签名一样 --><v-header></v-header><v-nav></v-nav>
</div><script src="js/vue.js"></script>
<script>// 定义组件var header = {// template类似于之前的el template 只能有一个根组件  最外层只能有一个标签包裹template:'<main><h1 @click="change()">这是组件</h1><p>{{msg}}</p></main>',// 组件中的数据，只能书写成函数的形式data(){return{msg:'这是标题'}},methods:{change(){alert()}}}var nav = {// template类似于之前的eltemplate:'<h1>这是组件</h1>'}new Vue({el:'#app',data:{},// 挂载组件，把占位符和组件联系起来components:{// 占位符: 组件'v-header':header,'v-nav':nav}})
</script>

十四、slot

<div id="app"><v-header><!-- 标签的slot的值和slot的name值保持一致 --><span slot="title">xxx</span><i slot="m">mmm</i></v-header><v-footer><b slot="title">3333</b></v-footer>
</div>
<template id="m"><main><slot name="m"></slot><h1>这是公共组件</h1><p>显示内容</p><!-- slot插槽用来保留位置 name取名字 --><slot name="title"></slot></main>
</template><script src="js/vue.js"></script>
<script>var m = {template:'#m'}new Vue({el:'#app',components:{'v-header':m,'v-footer':m}})
</script>

十五、动态组件

<div id="app"><!--  动态组件称为动态占位符占位符由components的值决定components最终渲染的内容由components的is值决定--><button @click="msg='v-header'">头部</button><button @click="msg='v-footer'">底部</button><components :is="msg"></components>
</div>
<template id="header"><h1>这是头部</h1>
</template>
<template id="footer"><h1>这是底部</h1>
</template><script src="js/vue.js"></script>
<script>var header = {template:'#header'}var footer = {template:'#footer'}new Vue({el:'#app',data:{msg:'v-footer'},components:{'v-header':header,'v-footer':footer}})
</script>

十六、父组件给子组件传参

<!-- 组件被包裹，可以称为父子组件 -->
<!-- 在vue中。父组件和子组件不能直接相互通信（数据传递） -->
<!-- 父组件传参给子组件第一步：在占位符中      :子组件接收数据名="父组件数据"第二步：在子组件中 props  props:['子组件接收数据名']
-->
<div id="app"><!-- 第一步：在占位符中      :子组件接收数据名="父组件数据" --><v-header :cmsg="msg"></v-header><h1>这是父组件</h1>{{msg}}
</div>
<template id="header"><main><h1>这是子组件</h1>{{num}}<br><br>{{cmsg}}</main>
</template><script src="js/vue.js"></script>
<script>var header = {template:'#header',// 第二步：在子组件中 props  props:['子组件接收数据名']// 子组件的数据需要书写成函数的形式props:['cmsg'],data() {return {// num 只能在 header组件中使用num:'children'}}}new Vue({el:'#app',data:{// msg 的数据只能在app组件中使用msg:"parent"},components:{'v-header':header}})
</script>

十七、子组件给父组件传参

<!-- 第一步：自己定义一个方法，在方法内部自定义事件  this.$emit('自己定义事件名字',传递数据)第二步:在子组件中，调用定义的方法第三步：在占位符中  @事件名字="父组件中接收数据的方法"第四步：在父组件中，定义接收数据的方法-->
<div id="app"><!-- 第三步：在占位符中  @事件名字="父组件中接收数据的方法"方法不能加()--><v-header  @send="getdata"></v-header><h1 @click="change()">这是父组件</h1>{{pmsg}}{{stu}}
</div><template id="header"><main><h1 @click="change()">这是子组件的数据</h1><!-- 第二步:调用定义的方法 -->{{fn()}}{{msg}}{{stu}}</main>
</template><script src="js/vue.js"></script>
<script>var header={template:'#header',data(){return{msg:'这是子组件的数据',stu:{score:100}}},methods:{change(){this.msg+='h'this.stu.score--},fn(){// 第一步：自己定义一个方法，在方法内部自定义事件// this.$emit('自己定义事件名字',传递数据)this.$emit('send',this.msg,this.stu)}}}new Vue({el:'#app',components:{'v-header':header},data:{pmsg:'',stu:{}},methods:{change(){this.pmsg+='vvv'this.stu.score++},// 第四步：在父组件中，定义接收数据的方法getdata(a,b){this.pmsg=a;console.log(a,b)this.stu=b;}}})
</script>

十八、路由

<div id="app"><!-- 需要跳转的地方的使用router-link 跳转路径使用to to的值自定义 路径前面加/ 路径的名字和变量命名规则一样 --><!-- router-view存储渲染的内容 --><router-view></router-view><router-link to="/index">首页</router-link><router-link to="/type">分类</router-link>
</div>
<!-- 书写模板 -->
<template id="index"><h1>这是首页的内容</h1>
</template>
<template id="type"><h1>这是分类的内容</h1>
</template><script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>// 定义组件var index = {template: '#index'}var type = {template: '#type'}// 配置路径var router = new VueRouter({routes: [{// path 的值和 touter-link的to值一样path: '/index',component: index}, {// path 的值和 router-link的to值一样path: '/type',component: type}, {// 重定向 重新定位位置 *通用，选择所有的// 以上都不符合的时候path: '/*',redirect: '/index'}]})new Vue({el: "#app",// 挂载路由router: router})
</script>

Vue.js前端开发实战总结（1）相关推荐

web开发技术，vue.js前端开发实战黑马程序员
作者根据多年的终端使用经验,详细介绍了一些实用的 CLI 工具,希望它们能帮读者提高生产力. 我大部分的时间都花费在终端的使用上,我觉得有必要给大家推荐一下比较好用的终端工具.先给大家列个推荐清单,如 ...
vue视频教程（Vue.js前端开发基础与项目实战）
适合人群: 适合网页设计与制作人员.网站建设开发人员.院校相关专业的学生.个人网站制作爱好者学习计划: 1.建议每天学习两小时 2.课堂代码可在附件中下载课程目标: 学习Vue前端框架,能使用Vu ...
Vue.js前端开发实践第一章课后作业
课后习题一.填空题 1. Vue是一套构建用户界面的渐进式框架. 2. MVVM主要包含3个部分,分别是Model. View和ViewModel. 3. Vue 中通过refs属性获取相应DOM元 ...
vue.js 前端开发常见问题
前端开发常见问题 1. 热部署失效解决办法:参考查看系统当前max_user_watches的值 $ cat /proc/sys/fs/inotify/max_user_watches 复制代码应 ...
vue.js前端开发技术读书笔记二：vue数据绑定
文章目录 1.vue模板语法 2.响应式声明渲染机制 3.vue属性绑定 4.vue双向数据绑定 5.vue计算属性 6.计算属性与methods区别 7.vue生命周期 ❤️❤️❤️vue模板语法? ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-2.启动项目
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-2.启动项目技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境技能学习:学习 ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-3.路由、模型与数据库操作
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-3.路由.模型与数据库操作技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境 ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片技能学习:学习使用php(tp6框架) + ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-6.用户登录（二），token验证
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-6.用户登录(二),token验证技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本 ...

Vue.js前端开发实战总结（1）

什么是Vue

一、Vue体验

二、Vue相关知识

三、插值表达式

四、v-on

五、v-html、v-text

六、v-if

七、v-else-if

八、v-show

九、v-bind（其一）

v-bind（其二）

十、v-for

十一、v-model

十二、指令缩写

十三、组件

十四、slot

十五、动态组件

十六、父组件给子组件传参

十七、子组件给父组件传参

十八、路由

Vue.js前端开发实战总结（1）相关推荐

最新文章

热门文章