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