Vue基础特性-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_80278139/article/details/143866558

1、Vue实例和选项

还有的是这里进行编辑Vue代码的时候是要通过导入官网下载的vue包才可以的：

<script type="text/javascript" src="/js/vue.js"></script>

var vm = new Vue({
    //填入
})

1.2、数据

这里的数据都是通过{ {实例对象}}传入实例的对象的方式传入的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="/js/vue.js"></script>
</head>
<body>
<div id="box">
  <h3>网站名称:{
  {name}}</h3>
  <h3>网站地址:{
  {url}}</h3>
</div>
<script>
  var demo = new Vue({
    el:'#box',
    data:{
      name : '水利水电学院',
      url: 'www.baidu.com'
    }
  });
</script>
</body>
</html>

这里的data还可以从外面的定义变量data传入，经过最后一行代码验证是true的

<script>
  var data = {name: 'kads',url: 'dsdsda'};
  var demo = new Vue({
    el:'#box',
    data:data
  });
  document.write(demo.$data === data); //true
</script>

1.3、方法

这里直接通过showInfo（）调用函数，接收return的值的方式呈现出来：

<div id="box">
  <h3>网站名称:{
  {showInfo()}}</h3>

</div>
<script>
  var vm = new Vue({
    el:'#box',
    data:{
      name : '哈哈哈哈',
      url :'www.baidu.com'
    },
    methods : {
      showInfo : function (){ //这里就不传值了
        return this.name + ':' + this.url; //连接字符串
      }
    }
  });
</script>

1.4、生命周期钩子函数

beforeCreate //Vue实例开始初始化时调用

created //实例创建之后调用，还没有在DOM编译

    mounted                  //在DOM完成之后，相当于window.onload()

beforeDestroy           //实例销毁之前前面的三个都执行完了调用

destroyed                 //实例销毁之后调用

这里的this.$destroy();就是进行销毁这个vue实例

<script>
  var demo = new Vue({
    el:'#box',
    beforeCreate: function (){  //Vue实例开始初始化时调用
      console.log('beforeCreate');
    },
    created : function (){   //实例创建之后调用，还没有在DOM编译
      console.log('created');
    },
    beforeDestroy : function (){   //实例销毁之前 前面的三个都执行完了调用
      console.log('beforeDestroy');