当前位置: 首页 > Web前端 > vue.js

Vue2.x学习笔记(一)

时间:2023-03-31 17:58:11 vue.js

1Vue目录结构build:项目构建webpack相关代码config:配置目录,包括端口号等node_modules:npm加载的项目依赖模块src:开发目录模块,包括assets(Resourcefiles),components(组件文件),App.vue项目入口文件,main.js项目核心文件static:静态资源文件,比如图片,字体等。test:初始测试目录。xxx:配置文件,如语法配置、git配置等index.html:首页入口文件package.json:项目配置文件README.md:项目描述文件2Vue对象Vue对象的基本参数有:el:DOM元素的iddata:用于定义属性methods:用于定义Function{{}}输出对象属性和函数返回值。当一个Vue实例被创建时,在data中找到的所有属性都会被添加到Vue的响应式系统中。当这些属性的值发生变化时,HTML视图也会随之变化。.3Vue模板语法Vue.js使用基于HTML的模板语法,允许开发人员以声明方式将DOM绑定到底层Vue实例数据。Vue.js的核心是一个允许您使用简洁的模板语法以声明方式将数据呈现到DOM中的系统。结合响应系统,当应用程序状态发生变化时,Vue可以智能计算重新渲染组件的最小成本并应用于DOM操作。3.1插值插值分为两种方式:纯文本HTML纯文本可以使用{{}}插值,例如:{{message}}

HTML使用v-html指令:
3.2Attribute属性绑定使用v-bind指令,如:
3.3表达式可以在{{}}中直接嵌入JS表达式,包括计算和函数调用等,如:{{5.222-1.2345}}
{{ok?'YES':'NO'}}
{{message.reverse()}}
newVue({el:'#app',data:{seen:true}})3.5Parameter参数在命令后用冒号表示,例如v-bind指令用于响应式更新HTML:somewebsitehref是一个参数,告诉v-bind命令结合元素的href属性与表达式url的值绑定3.6修饰符修饰符是由.指定的特殊后缀。它用于指示应以特殊方式绑定命令。例如,.prevent修饰符告诉v-on命令为触发事件调用event.preventDefault():3.7v-modelv-model用于在input、select、textarea、chekcbox、radio等表单控件元素上创建双向数据绑定,根据表单Value更新绑定元素的值。例如:

{{message}}

3.8按钮事件可以使用v-on:click监听按钮事件,如:

{{message}}

反转字符串3.9过滤器允许将过滤器定义为一些常见的文本格式,例如:{{message|f}}另外,filter可以串联,接受参数:{{message|过滤器A|filterB}}{{消息|filterA('arg1','arg2')}}//message作为filterA的第一个参数,'arg1'和'arg2'分别为第二个,第三个参数改变上面的filter:{{留言|f(10)}}3.10缩写v-bind:href可以缩写as:hrefv-on:click可以简写为@click