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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值