欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue项目实战（一）：vue的基本使用与框架解析

程序员文章站 2022-04-30 13:38:11
...

每个 Vue 应用都需要通过实例化 Vue 来实现。

一、Vue资源引入

之前已经讲过了如何创建一个基本的项目helloworld项目，现在我们可以开始给项目加页面，首先我们打开index.html,
vue项目实战（一）：vue的基本使用与框架解析

1、引包

如果我们是使用npm install，那么此时我们可以输入以下语句

<script src="./node_modules/vue/dist/vue.min.js"></script>

vue项目实战（一）：vue的基本使用与框架解析
所有的vue包都会在node_modules/vue/dist/vue.min.js目录下。

二、Vue的语法模板

1、基础模板

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<body>
  <div id="app">
    <!-- vue的模板语法 {{}}双大括号插值-->
      <h2>{{msg}}</h2>
  </div>

  <script type="text/javascript">
    //如果template中定义了内容，那么优先加载模板，无定义内容才加载#app的内容
    new Vue({
      el: "#app", //绑定的Dom对象,#一定要有
      data:{//数据属性
        //即可以使对象，也可以是函数
        msg:"Hello Vue",
      },
      template:"<div>{{msg}}</div>"
    })
  </script>
</body>
  • 可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：<div id="app">，这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响（将该vue元素绑定到特定的div）。
  • data 用于定义属性，实例中有一个属性为：message，就像c++类的属性一样。既可以是一个元素，也可以是一个函数。
  • template定义模板，如果模板中定义了显示的内容，那么优先加载模板，无定义内容才加载div #app的内容。

接下来我们看看如何定义数据对象。

  • methods 用于定义的函数，可以通过 return 来返回函数值。
  • {{ }} 用于在div中输出对象属性和函数返回值，因此我们的div写成了下面的丫子，即可以返回vue对象的属性，也可以调用一个method，输出这个method的返回值。

2、Vue模板的插值与数据属性详解

<body>
  <div id="app">
    <!-- vue的模板语法 {{}}双大括号插值-->
      <h2>{{msg}}</h2>  <!--可以插Vue对象的数据元素-->
      <h3>{{1==1}}</h3> <!--可以插二元运算-->
      <h4>{{isTrue}}</h4> 
      <h2>{{str.split('').reverse().join('')}}</h2> <!--可以插js方法-->
      <h3>{{1>2?"你学会了Vue":"你啥都不会"}}</h3> <!--可以插三元运算式-->
  </div> 

  <script type="text/javascript">
    //如果template中定义了内容，那么优先加载模板，无定义内容才加载#app的内容
    vm = new Vue({
      el: "#app", //绑定的Dom对象,#一定要有
      data:{//数据属性
        //即可以使对象，也可以是函数
        msg:"Hello Vue",
        isTrue: 1==1,
        str:"I am VsCode!",
      },
      //template:"<div>{{msg}}</div>"
    })
  </script>
</body>

然后我们使用{{}}来看看Vue到底支持我们插入哪些东西？运行结果如下：
vue项目实战（一）：vue的基本使用与框架解析
可以看到，只要是加了{{}}都可以插值并展示，但是{{"张三"}}可以有而{{张三}}是不允许的，不加引号会被认为是一个方法，但是我们可以这样玩 {{ {name:"张三"} }}传递一个对象进去，
vue项目实战（一）：vue的基本使用与框架解析
我们可以使用console.log(vm);（将该语句加到script中）来观察一下定义的vue对象，用浏览器打开网页，F12后在console栏目下可以查看

  <script type="text/javascript">
    //如果template中定义了内容，那么优先加载模板，无定义内容才加载#app的内容
    vm = new Vue({
      el: "#app", //绑定的Dom对象,#一定要有
      data:{//数据属性
        //即可以使对象，也可以是函数
        msg:"Hello Vue",
        isTrue: 1==1,
        str:"I am VsCode!",
      },
      //template:"<div>{{msg}}</div>"
    })
    console.log(vm);
  </script>

vue项目实战（一）：vue的基本使用与框架解析
可以看到除了我们定义的一些数据属性，vue实例还暴露了一些有用的实例属性和方法，这些自定义的方法都有前缀$，这些自定义的方法极大的遍历了我们的操作，将刚才的console语句改成这样

    console.log(vm.$el);
    console.log(vm.data)

再打开我们的console面板，
vue项目实战（一）：vue的基本使用与框架解析
可以看到通过vm.$el的方式，起到了一个getelementbyId的操作，直接拿到了div元素，而不加$就会显示不出来，将代码改为

    console.log(vm.$el===document.getElementById('app'));
    console.log(vm.$data)

就可以正常的拿到数据，并且验证了我们的vm.$el操作，其实有点像jquery。
vue项目实战（一）：vue的基本使用与框架解析

3、数据驱动视图

Vue中最为重要的部分，当数据发生改变时，视图也会发生改变。你改变了Vue的某个属性值，相应的Dom元件里面的内容也会发生改变。

4、MVVM设计模式

vue项目实战（一）：vue的基本使用与框架解析
一般的项目分为三个，model，view和controller，model主要是数据视图，与MySQL，SQL有关，view即视图，包括了html和其他的一些模板语法，controller是路由，即如何得到数据处理数据，对view进行渲染，简称为路由。

那么Vue做了个什么事情呢？Vue将视图层整个拿了出来，并提出了MVVM的设计模式，MVVM：Model，View，viewModel。Model即我们刚才新建Vue对象的数据，这些数据我们刚才是写死的，但是其实它是需要从DB里面拿出来的。View即我们刚才绑定的Dom，那个id是app的div，他负责在视图层显示我们的数据。而viewModel呢，就是两个{{}}，这就组成了最重要的数据驱动视图的思想。

相关标签： 开发

上一篇： 免费的日历和日期选择脚本

下一篇： Vue+VsCode输出HelloWorld项目及项目结构解析

推荐阅读