vue的下载、引入和基本使用

最新推荐文章于 2024-01-28 23:41:44 发布

原创最新推荐文章于 2024-01-28 23:41:44 发布 · 3.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #node.js #javascript

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍如何使用Vue.js，包括安装、引入及基本使用步骤。通过实例演示如何创建Vue实例，绑定DOM元素，定义数据属性、组件、模板、方法、侦听器及过滤器。

vue作为一个流行的前端框架，我们该如何将其应用到工作中呢？简单概括为以下三步：
（1）安装vue
我们采用npm的方式安装。因此，在使用npm之前先将安装npm。nodeJS中包含npm，所以我们此前直接安装nodeJS

npm install vue

（2）引入vue

<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>

（3）基本使用

let vm =  new Vue({
   //el通过指定id来绑定页面中的dom元素
  el:'#app'
   // 数据属性data可以是对象形式也可以是函数形式，一般采用函数形式。用数据来驱动视图，在视图层使用的格式为{{数据属性名}}
  data:function() {
       msg:'加油哦',
  	   isTrue: 1==1,
  	   str:'hello vue'
  },
  // 注入局部组件，只有注入了才能使用，假设App是我们已经定义好的局部组件
  components:{
       App
  },
  // 使用局部组件，要避免才坑点的是 template中包含的内容不是用引号包含，而是用`...`。而且一旦template中存在内容则会覆盖掉id='app'的div中编写的内容
  template:`
		<App/>
 `,
 //定义函数
 methods:{
    changeHandler:function() {
    }
 },
 //侦听数据属性
 watch:{
  	msg:function(newV,oldV) {
  	}
},
//定义过滤器
 filters:{
    //该过滤器的作用是给数据添加美元符$
    addOtherToNum: function(value) {
  			return  '$' + value
    }
  }
})
//暴露出vm下的属性和方法
console.log(vm)
//调用vm对象下的属性和方法时需添加$，而data下具体的数据则无需
console.log(vm.$el)
console.log(vm.$data)
console.log(vm.msg)