Vuejs学习笔记一

最新推荐文章于 2022-03-08 09:40:54 发布

草克力巧莓

最新推荐文章于 2022-03-08 09:40:54 发布

阅读量205

点赞数 1

本文链接：https://blog.csdn.net/qq_33462673/article/details/78493015

版权

关于Vue的介绍，可以借鉴一下知乎大佬的理解https://zhuanlan.zhihu.com/p/25659025

下面来整理一下新手入门Vue第一天的知识点。

一、安装

1. 创建一个文件夹，里面专门放你下载的Vue包

2. 执行下载命令，由于下载的速度过慢，不建议每创建一个Vue项目就用命令行去下载，最好的方法就是在第一次下载好Vue包之后，就直接压缩打包，后面直接引用解压。

#全局安装 vue-cli

$ npm i -g vue-cli

#创建一个基于 webpack模板的新项目

$ vue init webpack my-project

#安装依赖

$ cd my project

$ npm i

$ npm run dev

执行完上面的命令以后，不要忘记将你下好的东西压缩打包

3. 安装Vue调试工具，详细步骤可以参考http://www.cnblogs.com/momozjm/p/7098476.html，后面再google菜单里的更多工具中的扩展程序将克隆下来的文件中shells>>chrome文件包拖进google，当你的google浏览器的右上角（地址搜索栏的右方）出现了Vue的logo就表示你已经装好啦ヾ(◍°∇°◍)ﾉﾞ。

二、试用Vue.js，其实吧，这个试用是完全用不到刚刚输入命令行下到的那个包裹的，只是体验一下它关注视图的功能，所以可以下载我上传的这个Vue.js或者去官网下载开发版本，不过两个都是同一个文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="vue.js" charset="utf-8"></script>
  <!-- View-->
  <div id="app">
    <!-- item相当于list中的每一项,list是一个数组，这里的item是对象 -->
    <ul>
      <!-- v-model动态绑定属性，当输入框内的内容变化的时候，message属性的值会跟着变化 -->
      <input v-model="message" type="text" >
      <button v-οnclick="reverseMessage">旋转message</button>
      <!-- <li v-for="item in list"> -->
      <li v-for="(item,index) in list">
        {{ index}}:{{item.text}}

      </li>
      <!-- 响应式，我们可以动态的修改list这个数组，师徒会自动更新 -->
    </ul>
    <!-- 到数据中的seen属性为true则将p标签插入到页面，否则会移除 -->
    <p v-if="seen">你看不到我</p>
    <!-- seen为true则显示，seen为false，则display:none; -->
    <p v-show="seen">display:none;</p>
    <!--v-bind指令将model中的数据动态绑定到属性中-->
    <span v-bind:title = "message">
      提示信息
    </span>
    <!-- 用插值得方式显示 -->
    {{message}}
  </div>
  <script type="text/javascript">
  // Model
    let data = {
      message:"hello",
      seen:true,
      list:[
        {text:'html'},
        {text:'css'},
        {text:'js'},
        {text:'ajax'},
        {text:'node.js'},
        {text:"vue"}
      ]
    }
    //ViewModel
    let app = new Vue({
      el:"#app",
      data
    })
    console.log(app.message);
    //响应式
    app.message = "hello";
  </script>
</body>
</html>

大家可以好好感受一下代码，好好感受一下他是怎么实现数据绑定和组合视图。