分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

Vue.js入门

发布时间:2023-09-06 01:51责任编辑:苏小强关键词:js

引用vue.js文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>

实例:

{{ }}用于输出对象属性和函数返回值

el 获取节点

data 用于定义属性

methods 用于定义函数,可以通过return来返回函数值

<div id="app"> ???<p>{{xiu}}</p> ???<p>{{kang()}}</p></div><script>new vue({ ???el: "#app"; ???data: { ???????xiu: "添加内容"; ???}, ???methods: { ???????kang: function() { ???????????return this.xiu ???????} ????}});

模板语法

  • 插值

文本

数据绑定最常见的形式是使用{{ }}的文本插值

<div id="app"> ???<p>{{ message }}</p></div>

HTML

使用v-html指令用于输出HTML代码

<div id="app" v-html="xiu"></div><script>new Vue({ ?el: ‘#app‘, ?data: { ???xiu: ‘<h1>修抗</h1>‘ ?}})</script>

属性

style> ???.xiu { ???????color: red; ???}</style><div id="app" v-bind:class="{‘xiu‘:xiu}"><input type="checkbox" v-model="xiu">红色</div><script>new Vue({ ???el: "#app", ???data: { ???????xiu: true ???}})</script>

表达式

  • 指令 

参数

修饰符

  • 用户输入
  • 过滤器
  • 缩写

v-bind

v-on

条件语句

循环语句

计算属性

监听属性

样式绑定

事件处理器

表单

主键

自定义指令

路由

---恢复内容结束---

Vue.js入门

原文地址:https://www.cnblogs.com/xiukang/p/8969403.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved