VUE
2022-03-07 19:12:12 30 举报AI智能生成
登录查看完整内容
自学VUE
作者其他创作
大纲/内容
<div v-bind:class=\"{'active': isActive}\"></div>
v-bind:class=\
<div v-bind:class=\"classObject\"></div>
<div v-bind:class=\
<div v-bind:style=\
<div v-bind:style=\"styleObject\">菜鸟教程</div>
样式绑定
事件绑定
表单
组件（Component）是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
不能使用data里的值做传值要使用父UI里绑定的值做
注意: 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
父子组件传值
创建局部组件components:{ //<runoob>将只在父模板可用 'runoob': Child}
局部组件
所有实例都能用全局组件。
tagName为组件名，options为配置选项。注册后，我们可以使用以下方式来调用组件：<tagName></tagName>
全局组件
组件
分支主题
<p>{{ message }}</p>
文本
<div v-html=\"message\"></div>
html
<div v-bind:class=\"{'class1': use}\">
属性
{{ message.split('').reverse().join('') }}
js表达式
<p v-if=\"seen\">现在你看到我了</p>
指令【条件】
<pre><a v-bind:href=\"url\">菜鸟教程</a></pre>
<a v-on:click=\"doSomething\">
参数
修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()：
<form v-on:submit.prevent=\"onSubmit\"></form>
修饰符
<input v-model=\"message\">
v-model指令用来在input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<button v-on:click=\"reverseMessage\">反转字符串</button>
按钮的事件我们可以使用v-on监听事件，并对用户的输入进行响应。
用户输入
Vue.js允许你自定义过滤器，被用作一些常见的文本格式化。由\"管道符\
{{message|capitalize}}
<div v-bind:id=\"rawId|formatId\"></div>
过滤器可以串联：{{ message | filterA | filterB }}
过滤器
v-bind缩写<a :href=\"url\"></a>
v-on缩写<a @click=\"doSomething\"></a>
缩写
模版
<p v-if=\"seen\">现在你看到我了</p>
<div v-else>
<div v-else-if=\"type === 'C'\">
<h1 v-show=\"ok\">Hello!</h1>
条件语句
迭代list<template v-for=\"site in sites\">
v-for 可以通过一个对象的属性来迭代数据【迭代dict value】：
<li v-for=\
<li v-for=\"n in 10\"> 迭代整数【1-n】
循环语句
计算属性关键词:computed。【动态属性】计算属性在处理一些复杂逻辑时是很有用的。
我们可以使用methods来替代computed，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用methods，在重新渲染的时候，函数总会重新调用执行。
可以说使用computed性能会更好，但是如果你不希望缓存，你可以使用methods属性。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
计算属性
监听属性
VUE
0 条评论
回复 删除
下一页
