网站建设的展望 视频,企业网站建设兴田德润地址,开公司流程及费用2022最新,网站开发国内外现状研究Vue是一个非常流行的渐进式JavaScript框架#xff0c;渐进式指的是自底向上#xff0c;从小组件逐渐向上构成整个项目#xff0c;渐进式还可以理解为#xff1a;用什么就拿什么#xff0c;每个组件只做自己的事#xff0c;尽可能解耦合。
本节我们将学习简单的Vue实例渐进式指的是自底向上从小组件逐渐向上构成整个项目渐进式还可以理解为用什么就拿什么每个组件只做自己的事尽可能解耦合。
本节我们将学习简单的Vue实例选用版本是Vue2更加稳定且生态丰富。
请确保在学习本内容前你有一定的HTML和JavaScript基础要理解JavaScript的对象的概念。
在刚开始学习的时候我们可以用在页面中引入Vue.js的方法来使用Vue但是后续实际开发的时候还是要用Node.js来构建Vue项目。 Node.js一个包管理工具你可以理解为python中的pip或者anaconda不过node.js是一种面向js的管理工具。 1.引入Vue.js
先创建一个HTML页面内容如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleTitle/title!--引入Vue2--script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.0.0-rc.1/vue.min.js/script
/head
body/bodyscript
//咱们自己的代码写在这里
/script/html2.创建Vue实例
Vue实例是Vue.js中最基本的单元通过new Vue(构造参数)可以得到一个实例对象。
在后面我们不再叫Vue对象而是Vue实例这更加准确并且有助于与数据对象进行区分。
一般我们会用vm来命名一个Vue对象。vm: ViewModel试图模型
在body里面添加一个div并将其id设置为app这个命名是自己定的但是通常情况下都使用app。
div idapp{{msg}}
/div这里的{{msg}}是一种“显式调用”这里将会把app对应的Vue实例中的data中的msg取出来放到这里并实现数据的“双向绑定”。先不要管这些概念有个大概了解就好。
Vue实例和一个DOM对象利用id进行绑定并且这个绑定是双向的意思是如果我们修改Vue实例中的数据DOM中的也会改变反之亦然。
然后我们在script中创建一个Vue实例它可以包含一些属性这些属性用一个对象包起来
const vm new Vue({el: #app,//绑定到对应的dom上data: function(){return {msg : Hello, World!}}
})注意看这里的data里面是一个函数它返回一个对象里面可以放一些数据键值对。
现在打开这个html它就会显示一个Hello, World!字符串。 3.Vue实例的常用属性
el表示Vue实例将要挂载到的元素。它可以是一个CSS选择器字符串也可以是一个DOM元素。当Vue实例被创建时它会自动将自己挂载到这个元素上。data表示Vue实例的数据对象。它可以包含各种数据属性用于存储和管理Vue实例的状态。这些数据属性可以在模板中被访问和展示。它的值是一个函数这个函数返回一个数据对象。methods表示Vue实例的方法。这些方法可以在模板和Vue实例内部通过this访问。注意这个不能使用() 的形式来写因为这样是不能用this的。
4.给实例加一些方法
我们来实现这样一个功能点击按钮让页面上的元素值1或-1。
先写下HTML
div idapph1{{msg}}{{cnt}}/h1buttonADD/buttonbuttonSUB/button
/div我们的业务逻辑如何设计呢原理就是在Vue实例的methods属性中添加两个函数用于修改cnt的值然后将它们分别绑定到两个按钮的点击事件上即可。
写一个Vue实例通过el属性绑定到#app这个DOM上面。
const vm new Vue({el: #app,//绑定到对应的dom元素上data: function(){return {msg: Count : ,cnt: 0}},methods:{add(){this.cnt //注意这里一定要写this否则会出错},sub(){this.cnt --}}
})接下来将这两个函数绑定到按钮事件上可以使用v-on:click或者click属性来设置但是click是Vue3.x的语法糖我也不知道为啥在Vue2.x可以用很神秘
div idapph1{{msg}}{{cnt}}/h1button v-on:clickaddADD/buttonbutton clicksubSUB/button
/div以下是一些常见的监听器不用谢我点个赞不过分叭
v-on:mouseover鼠标移动到元素上时触发的事件监听器。v-on:mouseout鼠标从元素上移开时触发的事件监听器。v-on:mousemove鼠标在元素上移动时触发的事件监听器。v-on:keydown按下键盘按键时触发的事件监听器只有在获得焦点时有效。v-on:keyup释放键盘按键时触发的事件监听器只有在获得焦点时有效。v-on:focus元素获得焦点时触发的事件监听器。v-on:blur元素失去焦点时触发的事件监听器。v-on:change元素值发生变化时触发的事件监听器一般配合输入框使用。v-on:submit表单提交时触发的事件监听器。v-on:click鼠标点击元素时触发的事件监听器。
5.条件与循环
在Vue中可以在HTML中使用v-if属性来设置条件使用v-for来设置循环。
div idappli v-foritem in items姓名{{item.name}}大学{{item.university}} 网址a v-bind:hrefitem.url{{item.url}}/a/li
/div我们可以看到HTML中仅需写一个li就可以实现循环生成多个li的功能。
我们写的Vue实例如下
const vm new Vue({el: #app,//绑定DOM元素注意一定要写#data: function(){return {msg: Hello,//这个可以不写items:[{name: 张三, university: 武汉理工大学, url: https://www.baidu.com},{name: 李四, university: 武汉原神大学, url:https://www.yuanshen.com},{name: 李四2号, university: 湖北原神大学, url:https://www.yuanshen.com},{name: 王五, university: 武汉冰红茶大学, url:https://www.binghongcha.com},]}},
})结果如图
并且我们可以再加一个v-if属性来筛选大学中带有武汉的对象。
div idappli v-foritem in items v-ifitem.university.indexOf(武汉) ! -1姓名{{item.name}}大学{{item.university}} 网址a v-bind:hrefitem.url{{item.url}}/a/li
/div结果如下 在Vue中可以使用javascript语句[可迭代数据对象名].push({数据对象})来新增一个数据。
6.处理用户输入
在前面的例子中我们尝试了使用按钮来进行交互现在我们来看下Vue如何处理用户的输入框。
我们来实现一个input输入框输入什么页面上就显示什么实时更新。
这里我们需要用到v-model属性来将input输入框和message变量来绑定。
div idapppMessage is: {{message}}/pinput v-modelmessage placeholderedit me
/divVue实例如下
const vm new Vue({el: #app,data: function(){return {message: }},
})效果如下 v-model 指令在表单 input,textarea,select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 7.写在最后
本文仅作一个Vue的入门学习没有具体全面的逐个学习组件而是挑选一些简单有趣的例子进行实现。
我自己也还在学习中希望一起进步
