Vue.js 笔记

最新推荐文章于 2024-09-25 00:15:00 发布

weixin_30621919

最新推荐文章于 2024-09-25 00:15:00 发布

阅读量71

点赞数

原文链接：http://www.cnblogs.com/520gqk/p/9573173.html

版权

　　Vue.js简介：

　　 Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。  Vue 只关注视图层，采用自底向上增量开发的设计。  Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。  vue不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动

Vue初始引入CDN：

还可以下载 vue.js直接引入：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

npm:

1）获得npm 下载 node.js(javaScript 运行环境) 进官网下载安装下一步

2，node.js中有一个包管理器 npm ，node.js安装好以后自动会有 npm，

3，将淘宝镜像引入

　　$ npm install -g cnpm --registry=https://registry.npm.taobao.org

4，下载vue （通过cnpm）

　　cnpm install vue

5,创建文件夹进入文件夹路径执行

cnpm init -y

cnpm i vue

实例化Vue对象：

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
　　el:"#app"     跟容器
   data:{
   nmae:"gqk"
}
})

　数据方法　

var vm = new Vue({
　　el:"#app"     跟容器
   data:{
   nmae:"gqk",
   methods:{
      greet:function(time){
          return "good Morning!"+time+" "+this.name
        }
　　}
}
})

　数据的双向绑定： v-model

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <h1>{{ message }}</h1>
    <h1>{{ message }}</h1>
    <h1>{{ message }}</h1>
    <p>{{ message }}</p>
    <div>
      <span>{{ message }}</span>
    </div>
    <!-- 
      v-model 是 Vue 提供的一个特殊的属性，在 Vue 中被称之为指令
      它的作用就是：双向绑定表单控件
      什么是叫双向数据绑定？
      当数据发生改变， DOM 会自动更新
      当表单控件的值发生改变，数据也会自动得到更新
     -->
    <input type="text" v-model="message">
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      // 不要作用到 body 和 html 节点上
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
  </script>
</body>
</html>

　　姓名展示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    姓氏：<input type="text" value="李" v-model="firstname">
    <br>
    名字：<input type="text" value="鹏周" v-model="lastname">
    <br>
    <p>{{ firstname + lastname }}</p>
    <p>{{ lastname }}</p>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    // jQuery 提高了 DOM 操作的效率
    // Vue 极大的解放了 DOM 操作
    //    （Vue 全部把 DOM 操作都给你屏蔽了）
    // Vue 的核心思想就是：数据驱动视图
    new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: ''
      }
    })
  </script>
</body>
</html>

　　数字自动增长：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="number" v-model="number">
    <!-- <button οnclick="handleIncrement()">点击+1</button> -->
    <!-- 如果函数语句简单可以直接内联写 -->
    <!-- <button v-on:click="number++">点击+1</button>
    <!-- 如果函数语句比较多，建议把处理写到 JavaScript 中 -->
    <button v-on:click="handleIncrement">点击+1</button>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    // Document.get('dsa').on('cli')
    const app = new Vue({
      el: '#app',
      data: {
        number: 1
      },
      // 注意：方法写到 data 中可以，但是函数内部的 this 是 Window
      // 所以我们都建议把方法写到 methods 选项中
      methods: {
        handleIncrement: function () {
          // console.log(app.number)
          // 在通过 v-on 注册的方法中我们可以直接通过 this 来访问 data 中的数据成员
          this.number++
        }
      }
    })

    // function handleIncrement() {
    //   // console.log('111') 
    //   app.number++
    // }
  </script>
</body>

</html>

　　计算购物车案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>
      <label for="">商品价格</label>
      <input type="number" v-model="price">
    </div>
    <div>
      <label for="">商品数量</label>
      <button v-on:click="count = count - 1 < 0 ? 0 : count - 1">-</button><span>{{ count }}</span>
      <button v-on:click="handleCountClick">+</button>
    </div>
    <div>
      总价格：<strong>{{ price * count }}</strong>
    </div>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        price: 5,
        count: 2
      },
      // methods 中的方法不要使用箭头函数，否则绑定的是 Window
      // EcmaScript 6 为对象成员方法提供了一种简写的方式
      methods: {
        // 下面的写法等价于 handleCountClick: function () {}
        // 该语法没有任何特性，只是纯粹的简写了
        handleCountClick () {
          this.count++
        }
      }
    })
  </script>
</body>

</html>

简易计算器：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="number" v-model="num1">
    <select v-model="operation">
      <option >+</option>
      <option >-</option>
      <option >*</option>
      <option >/</option>
    </select>
    <input type="number" v-model="num2">
    <button v-on:click="jisuan(num1,num2,operation)">=</button> <!--<strong v-if="operation=='+'">{{parseInt(num1)+parseInt(num2)}}</strong>
    <strong v-else-if="operation=='-'">{{parseInt(num1)-parseInt(num2)}}</strong>
    <strong v-else-if="operation=='*'">{{parseInt(num1)*parseInt(num2)}}</strong>
    <strong v-else="operation=='/'">{{parseInt(num1)/parseInt(num2)}}</strong>-->
    <p>{{result}}</p>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        operation: '',
        num1:'',
        num2:"",
        result:""
      },
      methods:{
      	jisuan:function(num1,num2,operation){
      		if(operation=="+"){
      				this.result = parseInt(num1)+parseInt(num2);
      		}else if(operation=="-"){
      			this.result = parseInt(num1)-parseInt(num2);
      		}
      	
      	}
      }
    })
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .done {
      text-decoration: line-through;
      color: #ccc;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>Todo</h1>
    <p>{{ todos.filter(item => !item.done).length }} of {{ todos.length }} remaning [archive]</p>
    <p v-for="(item, index) in todos">
      <!-- 
        checkbox 双向绑定了 item.done
        当 checkbox 改变的时候，会影响数据 item.done 也跟着改变
        当 item.done 变了，会影响所有使用了这个 item.done 的绑定
       -->
      <input type="checkbox" v-model="item.done">
      <!-- 
        v-bind 可以用来动态绑定属性值
        class 给了一个对象：
          对象的 key 就是类名
          对象的 value 是布尔值

          当布尔值为 true 的时候，作用这个 key 样式
          当布尔值为 false 的时候，去除这个 key 样式
       -->
      <span v-bind:class="{done: item.done}">{{ item.title }}</span>
      <button @click="handleRemoveTodoClick(index)">X</button>
    </p>
    <input type="text" v-model="todoText" @keydown.enter="handleAddTodoClick">
    <button @click="handleAddTodoClick">Add</button>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const todos = [
      {
        id: 1,
        title: '吃饭',
        done: true
      },
      {
        id: 2,
        title: '睡觉',
        done: false
      },
      {
        id: 3,
        title: '写代码',
        done: true
      },
    ]

    const app = new Vue({
      el: '#app',
      data: {
        todos,
        todoText: ''
      },
      methods: {
        handleAddTodoClick () {
          // 得到 文本框的内容
          // 把内容 push 到 todos 中
          const todoText = this.todoText.trim()

          // 非空校验
          if (!todoText.length) {
            return
          }

          const todos = this.todos

          // 数据驱动视图，数据改变，视图改变
          todos.push({
            id: todos[todos.length - 1].id + 1,
            title: todoText,
            done: false
          })

          // 添加 todo 完成，清空文本框
          // 数据驱动视图，数据改变，视图变化
          this.todoText = ''
        },

        handleRemoveTodoClick (index) {
          this.todos.splice(index, 1)
        }
      }
    })


  </script>
</body>
</html>