第二课1--vue实例,生命周期钩子,文本插值,表达式

2019-09-27  本文已影响0人  kzc爱吃梨
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

  <div id="app">
    <!-- 文本插值用法 -->
    {{msg}}
    {{ 6+6 *3}}---可以进行简单的运算 <br>
    {{ 6<3 ? msg :a}}---可以用三元运算符 <br>
    {{if(6>3){}}-----注意:文本插值的形式,其中不能书写表达式,支持单个表达式
    开头,比如
    el,V ue实例本身也代理了data对象里的所有属性,所以可以这样访问− − − −访问vue实例的属性− − − app.
    data − −
    {{var a = 6}}--也是多行表达式----var a ;a = 6;
  </div>
var app = new Vue({
  //element,用于指定页面中已存在的DOM元素,挂载到DOM中,也可以是css
  el: "#app",
  //可以声明应用内需要的双向绑定的数据
  data: {
    msg: 'vue学习开始了',
    a: 2
  },
  created:function(){
    alert('我是vue实例,创建完成,还没挂载到DOM')
  },
  mounted:function(){
    alert('我是vue实例,已挂载到DOM')
  }
})
//----属性访问-----
//访问Vue实例属性
console.log(app.$el)
console.log(app.$data)
//访问data中的属性
console.log(app.msg)

笔记

上一篇下一篇

猜你喜欢

热点阅读