Vue.js入门

Vue实例和数据绑定

通过Vue可以创造出一个Vue的实例

var app = new Vue({
  el:'',
  data:{
  }
})
  1. el是必须的,用于指定一个已经存在的DOM元素来挂载Vue实例。
  2. 通过data选项,可以声明应用内需要的双向绑定的数据。
  3. 挂载成功后,可以通过
app.$el

来访问该元素。同时Vue也提供了很多实例的属性和方法。
如果访问data的属性,可以直接

app.msg

生命周期钩子

  • createdVue实例创建完成后调用,完成对数据的观测工作,但是尚未挂载,$el并不可用。可用于对数据的初始化工作。
  • mounted挂载到实例上后马上调用,一般用于处理第一个业务逻辑。
  • beforeDestroy实例销毁前调用,一般用于addEventListener监听事件。

文本插值与表达式

语法:使用双大括号( Mustache 语法)“{{}}”是最基本的文本插值方法,它会自动将我们双向绑定的数据实时显示出来,
用法:{{-----}}除了可以绑定属性外,还可以使用JS的表达式进行一些简单的运算、三元运算
Tips:Vue只支持单个的表达式,不支持语句和控制流。
{{1+2*3}}进行简单运算
{{6<7?msg:a}}进行三元运算
{{var a = 6}}也是多行表达式

var a ;a = 6;

过滤器

Vue.支持在{{---}}插值的尾部添加一小管道符 “ | ” 对数据进行过滤,经常用于格式化文本,比如字母全部大写、货币千位使用逗号分隔等。
过滤的规则是自定义的, 通过给 Vue 实例添加选项 filters 来设置
过滤器:{{ data | filter1 |filter2}}

{{date | formatDate(66,99)}} 

中的第一个和第二个参数,分别对应过滤器的第二个和
第三个参数。第一个参数是data

指令和事件

指令( Directives )是 Vue 模板中最常用的一项功能,它带有前缀 v-,能帮我们快速完成DOM操作。循环渲染。
v-­text:—————­解析文本 和{{ }} 作用一样
v­-html:————— 解析html
v­-bind:—————–v­-bind 的基本用途是动态更新 HTML 元素上的属性,比如 id 、class 等。
v­-on:——————它用来绑定事件监听器

语法糖

语法糖是指在不影响功能的情况下 , 添加某种简洁方法实现同样的效果 , 从而更加方便程
序开发。
v-bind——> : (冒号)
v-on ——> @

一些题目

  • 代码实战:

要求:
渲染文本到页面
渲染HTML到页面
动态绑定属性(任意属性均可)
绑定一个事件
必须使用到过滤器
上述要求必须使用到,v-text,v-html,v-bind,v-on,过滤器,内容不限,场景不限,旨在对本节课的指令事件进行练习.
代码:https://github.com/shlroland/vue.js-2rd-demo/blob/master/index.html

  • 请用代码写出一个包含el和data选项的vue实例,并挂载到页面中id为app的div上。

<div id="app">
    {{msg}}
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      msg: '我是msg',
    } 
  })
</script>
  • 第一次页面加载会触发哪几个钩子?

beforeCreate//触发
created//实例完成后调用
beforeMount//触发
mounted//挂载到实例上调用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容