当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue基础学习ING

vue基础学习ING

2020年07月14日  | 移动技术网IT编程  | 我要评论
  1. Vue 的基本介绍
    vue 是⼀个渐进式的框架。
    框架与库的区别：
    库：例如 jQuery，lodash，layui，easyui，库的特点在于，给我们提供了很多⽅法，我们直接使⽤这
    些⽅法来写代码即可。
    框架：从字⾯上可以理解为⼀个架⼦。最⼤的特点就是给开发者提供了⼀整套解决⽅案。我们在使⽤框
    架的时候，就需要遵循框架的规范和要求。
    什么是渐进式？
    如果只是想使⽤ vue 最基础的声明式渲染，那么 vue 完全可以当成⼀个模版引擎来使⽤。
    如果你想要使⽤组件化开发，那么可以使⽤ vue ⾥⾯的组件系统。
    如果想要开发单⻚应⽤，那么可以使⽤ vue ⾥⾯的客户端路由。
    如果你的组件越来越多，组件之间需要传递数据，那么可以使⽤ vue 的状态管理⼯具 vuex。
    vue 中⽂官⽹：https://cn.vuejs.org/
  2. 安装
    官⽹中介绍了好⼏种 vue 安装的⽅式，对于我们初学者来说，先使⽤ cdn 的⽅式是最⽅便的。

接下来我们来看⼀个快速⼊⻔的示例：

<body>
 <div id="app">
 {{ name }}
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
 new Vue({
 el : "#app",
 data : {
 name : "f67"
 }
 });
 </script>
</body>

模板插值
上⾯的代码就是使⽤到了 vue 中的声明式渲染。这⾥我们就是将 vue 当作是⼀个模板引擎来使⽤。{{
name }} 就相当于是⼀个占位符。

<div id="app">
 {{ name }}
</div>

构造器
每⼀个 vue 的应⽤都需要使⽤ Vue 构造函数来实例化出来⼀个 vue 的实例。

new Vue({
 el : "#app",
 data : {
 name : "f67"
 }
});

在实例化 vue 对象的时候，我们传⼊了⼀个选项对象。该选项对象中，包含了挂载元素和数据，当然，
还有更多的选项，例如⽣命周期、⽅法、计算属性等。
vue 实例上⾯的属性，为了区分⽤户⾃定义的属性和⽅法，vue 中的属性和⽅法⼀般前⾯会有⼀个 $ 符
号：

<body>
 <div id="app">
 {{ name }}
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
 const app = new Vue({
 el : "#app",
 data : {
 name : "f67",
 score : 100
 }
 });
 console.log(app.$el === document.getElementById('app'))
 // 监听数据的改变
 app.$watch('name',function(newValue, oldValue){
 console.log(`更新前的值为${oldValue}`);
 console.log(`更新后的值为${newValue}`);
 })
 </script>
</body>

上⾯的代码中，el表示vue的挂载元素，el 表示 vue 的挂载元素，watch 表示监听某⼀个数据的变化。

本文地址：https://blog.csdn.net/weixin_38722130/article/details/107322231

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网