【vue】基础知识学习与简单语法练习

vue是什么官方介绍Vue (读音 /vjuː/类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。自己理解简单理解就是程序员开发网页的一个基础框架可以更快更便捷的开发网站页面因为vue是使用javascript编写的并且只关心视图层所以它主要是操作DOM元素比如利用生成vue实例对象去挂载元素操作元素。!DOCTYPE html html head meta charsetUTF-8 script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script titlehallo vue/title /head body div idapp {{ message }} /div script var app new Vue({ //element挂载元素 el: #app, data: { message: hello vue } }) /script /body /html在使用vue框架时可以直接引入,以下是开发环境框架引入标签。!--开发环境-- script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptnew Vue创建Vue实例对象var app new Vue({})el挂载标签元素比如需要操作那个标签就需要将标签的id值前边添加一个‘#’符号。data数据对象在这里面可以直接写值必须配和“{{}}”插入表达式使用。methods方法主要是处理事件的业务逻辑script var app5 new Vue({ el:#app-5, data:{ messge:Hello Vue.js! }, methods:{ //点击事件处理函数方法名应与v-on指令绑定的事件名一致 handleClick(){ //split方法将字符串转换为数组reverse方法反转数组join方法将数组转换为字符串 this.messge this.messge.split().reverse().join() } } }) /script属性绑定v-bind为什么要属性绑定在没有绑定的时候DOM元素属性的值是静态的是不会变化的。使用v-bind:titlemessage后Vue 会将message解析为 JavaScript 表达式读取data中message的值并动态设置。body div idapp-2 !-- 将message绑定到span的title属性上,注意:属性值中不能使用单引号,必须使用双引号 -- span v-bind:titlemessage 鼠标悬停几秒钟查看此处动态绑定的提示信息attribute属性绑定 /span /div script var app2 new Vue({ //element挂载元素 el: #app-2, data: { //将message绑定到span的title属性上 message: 页面加载于 new Date().toLocaleString() } }) /script /body双向绑定v-model表单输入普通的 v-bind:valuedata只是单向的数据变化时更新视图但用户修改输入框时不会反过来更新数据。v-model 在单向绑定的基础上内部自动监听了输入事件例如 input 事件当用户输入时执行 data 新值从而实现了“反向绑定”。[ Vue data ] ←——(用户输入事件)—— [ 表单元素 ]↓ ↑(变化时) (变化时)↓ ↑[ 自动设置 value ] ——————→ [ 界面显示新值 ]条件渲染v-if/v-else/v-show列表渲染v-for 官方文档解释的非常详细不在赘述今日联系内容!DOCTYPE html html head meta charsetUTF-8 script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script titlevue_jichu/title /head body div idapp-2 !-- 将message绑定到span的title属性上,注意:属性值中不能使用单引号,必须使用双引号 -- span v-bind:titlemessage 鼠标悬停几秒钟查看此处动态绑定的提示信息attribute属性绑定 /span /div div idapp-3 !-- v-if指令:根据表达式的真假来显示或隐藏元素 -- p v-ifseen现在你看到我了/p /div div idapp-4 ol !-- v-for指令:根据数组或对象的属性来重复渲染元素 -- li v-fortodo in todos{{todo.text}}/li /ol /div div idapp-5 !-- v-on指令:绑定事件处理函数 -- p{{messge}}/p !-- click点击事件 -- button v-on:clickhandleClick点击我,可以倒着输出/button /div div idapp-6 p{{messge}}/p !-- v-model指令:绑定表单元素的值到数据模型 -- input v-modelmessge /div script var app2 new Vue({ //element挂载元素 el: #app-2, data: { //将message绑定到span的title属性上 message: 页面加载于 new Date().toLocaleString() } }) var app3 new Vue({ el: #app-3, data: { seen: true } }) var app4 new Vue({ el: #app-4, data: { //todos数组每个元素是一个对象包含text属性用于渲染到页面上 todos: [ { text: 学习 JavaScript }, { text: 学习 Vue }, { text: 整个牛项目 } ] } }) var app5 new Vue({ el:#app-5, data:{ messge:Hello Vue.js! }, methods:{ //点击事件处理函数方法名应与v-on指令绑定的事件名一致 handleClick(){ //split方法将字符串转换为数组reverse方法反转数组join方法将数组转换为字符串 this.messge this.messge.split().reverse().join() } } }) var app6 new Vue({ el:#app-6, data:{ messge:Hello Vue.js!123 } }) /script /body /html