乐趣区

Vue学习笔记一

1 Vue 目录构造

  • build:我的项目构建 webpack 的相干代码
  • config:配置目录,包含端口号等
  • node_modules:npm 加载的我的项目依赖模块
  • src:开发的目录模块,蕴含 assets(资源文件),components(组件文件),App.vue 我的项目入口文件,main.js我的项目外围文件
  • static:动态资源文件,如图片,字体等
  • test:初始测试目录
  • .xxx:配置文件,比方语法配置,git 配置等等
  • index.html:首页入口文件
  • package.json:我的项目配置文件
  • README.md:我的项目阐明文件

2 Vue 对象

Vue对象的基本参数有:

  • el:DOM 元素的 id
  • data:用于定义属性
  • methods:用于定义函数
  • {{}}输入对象属性和函数返回值

一个 Vue 实例被创立时,会向 Vue 的响应式零碎退出了 data 中能找到的所有属性,当这些属性的值扭转时 HTML 视图也会产生相应变动。

3 Vue 模板语法

Vue.js 应用了基于 HTML 的模板语法,容许开发者申明式地将 DOM 绑定至底层 Vue 实例数据。
Vue.js 的外围是一个容许你采纳简洁的模板语法来申明式的将数据渲染进 DOM 的零碎,联合响应零碎,在利用状态扭转时,Vue 可能智能地计算出从新渲染组建的最小代价并利用到 DOM 操作上。

3.1 插值

插值分为两种形式:

  • 纯文本
  • HTML

纯文本能够应用 {{}} 插值,比方:

<div id="app">{{message}}</div>
<script>
new Vue({
    el:'#app',
    data:{message:'text'}
})
</script>

HTML 应用 v-html 指令:

<div id="app" v-html="message"></div>
<script>
new Vue({
    el:'#app',
    data:{message:'<h1>h1 题目 </h1>'}
})
</script>

3.2 属性

属性绑定应用 v-bind 指令,比方:

<div v-bind:class="{'class1':use}"></div>
<script>
new Vue({
    el:'#app',
    data:{use:false}
})
</script>

3.3 表达式

能够在 {{}} 间接嵌入 JS 表达式,包含计算以及函数调用等等,比方:

<div id="app">
    {{5.222-1.2345}}
    <br>
    {{ok ? 'YES' : 'NO'}}
    <br>
    {{message.reverse()}}
</div>
<script>    
new Vue({
    el:'#app',
    data:{
        ok:true,
        message:'Reverse',
    }
})
</scirpt>

3.4 指令

指令是带有 v- 前缀的非凡属性,指令用于在表达式的值扭转时,将某些行为利用到 DOM 上,比方:

<div id="app">
    <p v-if="seen"> 看到了 </p>
</div>
<script>
new Vue({
    el:'#app',
    data:{seen:true}
})
</script>

3.5 参数

参数在指令前面以冒号表明,比方 v-bind 指令用于响应地更新 HTML:

<div id="app">
    <a v-bind:href="url"> 某个网站 </a>
</div>
<script>
new Vue({
    el:'#app',
    data:{url:'https://www.xxx.com'}
})
</script>

href是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

3.6 修饰符

修饰符是以 . 指明的非凡后缀,用于指出一个指令应该以非凡的形式绑定,例如 .prevent 修饰符告知 v-on 指令对于登程事件调用event.preventDefault()

<form v-on:sbumit.prevent="onSubmit"></form> 

3.7 v-model

v-model用来在 inputselecttextareachekcboxradio 等表单控件元素上创立双向的数据绑定,依据表单上的值更新绑定元素的值。比方:

<div id="app">
    <p>{{message}}</p>
    <input v-model="message">
</div>
<script>
new Vue({
    el:'#app',
    data:{message:'text'}
})
</script>

3.8 按钮事件

能够应用 v-on:click 监听按钮事件,比方:

<div id="app">
    <p>{{message}}</p>
    <button v-on:click="reverse"> 反转字符串 </button>
</div>
<script>
new Vue({
    el:'#app',
    data:{message:'reverseeeeee'},
    methods:{reverse:function(){this.message=this.messaage.split('').reverse().join('')
        }
    }
})
</script>

3.9 过滤器

容许定义过滤器用作一些常见文本的格式化,比方:

<div id="app">{{message | f}}</div>
<script>
new Vue({
    el:'#app',
    data:{message:'text'},
    filters:{f:function(value){if(!value) return ''
            value = value.toString
            return value.charAt(0).toUpperCase()+value.slice(1)
        }
    }
})
</script>

另外,过滤器能够串联以及承受参数:

{{message | filterA | filterB}}
{{message | filterA('arg1','arg2')}} // message 作为 filterA 的第一个参数,'arg1','arg2' 别离为第二个,第三个参数

将下面的过滤器改变一下:

<div id="app">{{message | f(10)}}</di>
<script>
new Vue({
    el:'#app',
    data:{ },
    filter:{f:function(value,times){if(!value) return ''
            value = value.toString()
            value = value.charAt(0).toUpperCase()+value.slice(1)
            return value.repeat(times)
        }
    }
})
</script>

3.10 缩写

  • v-bind:href能够缩写为:href
  • v-on:click能够缩写为@click
退出移动版