vue 入门
Vue 是一个 MVVM(Model / View / ViewModel) 的前端框架, 相对于 Angular 来说简单, 易学上手快, 近两年也也别流行, 发展速度较快, 已经超越 Angular 了. 比较适用于移动端, 轻量级的框架, 文件小, 运行速度快. 最近, 闲来无事, 所以学习一下 Vue 这个流行的框架, 以备后用.
一, 指令
v-model 多用于表单元素实现双向数据绑定 (同 angular 中的 ng-model)
v-for 格式: v-for="字段名 in(of) 数组 json" 循环数组或 json(同 angular 中的 ng-repeat), 需要注意从 vue2 开始取消了 $index
v-show 显示内容 (同 angular 中的 ng-show)
v-hide 隐藏内容 (同 angular 中的 ng-hide)
v-if 显示与隐藏 (dom 元素的删除添加 同 angular 中的 ng-if 默认值为 false)
v-else-if 必须和 v-if 连用
v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误
v-bind 动态绑定 作用: 及时对页面的数据进行更改
v-on:click 给标签绑定函数, 可以缩写为 @, 例如绑定一个点击函数 函数必须写在 methods 里面
v-text 解析文本
v-html 解析 html 标签
v-bind:class 三种绑定方法 1, 对象型 '{red:isred}' 2, 三元型 'isred?"red":"blue"'3, 数组型'[{red:"isred"},{blue:"isblue"}]'
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出
二, 基本组件属性
- new Vue({
- el, // 要绑定的 DOM element
- template, // 要解析的模板, 可以是 #id, HTML 或某個 DOM element
- data, // 要绑定的数据
- computed, // 依赖于别的数据计算出来的数据, name = firstName + lastName
- watch, // 监听方法, 监听到某一数据变化时, 需要做的对应操作
- methods, // 定义可以在元件或模板內使用的方法
- })
三, 基础使用
- 1.html
- <div id="app">
- <p>{{msg}}</p>
- </div>
- 2.js
- var app=new Vue({
- el:'#app',// 标签的类名, id, 用于获取元素
- // 以键值对的形式存放用到的数据成员
- data:{
- msg:'显示的内容'
- },
- // 包含要用到的函数方法
- methods:{
- }
- });
这样 js 中 msg 的内容就会在 p 标签内显示出来.
四, 实例
利用 bootstrap+vue 实现简易留言板的功能, 可以增加, 删除, 弹出模态框
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 简易留言板 </title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <style>
- </style>
- <link rel="stylesheet" href="../../node_modules/bootstrap/dist/CSS/bootstrap.min.css">
- <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
- <script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
- <script src="../../node_modules/vue/dist/vue.js"></script>
- <script>
- window.onload=function(){
- new Vue({
- el:'#box',
- data:{
- myData:[],
- username:'',
- age:'',
- nowIndex:-100
- },
- methods:{
- add:function(){
- this.myData.push({
- name:this.username,
- age:this.age
- });
- this.username='';
- this.age='';
- },
- deleteMsg:function(n){
- if(n==-2){
- this.myData=[];
- }else{
- this.myData.splice(n,1);
- }
- }
- }
- });
- };
- </script>
- </head>
- <body>
- <div class="container" id="box">
- <form role="form">
- <div class="form-group">
- <label for="username"> 用户名:</label>
- <input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">
- </div>
- <div class="form-group">
- <label for="age"> 年 龄:</label>
- <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age">
- </div>
- <div class="form-group">
- <input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
- <input type="reset" value="重置" class="btn btn-danger">
- </div>
- </form>
- <hr>
- <table class="table table-bordered table-hover">
- <h3 class="h3 text-info text-center"> 用户信息表 </h3>
- <tr class="text-danger">
- <th class="text-center"> 序号 </th>
- <th class="text-center"> 名字 </th>
- <th class="text-center"> 年龄 </th>
- <th class="text-center"> 操作 </th>
- </tr>
- <tr class="text-center" v-for="(item,index) in myData">
- <td>{{index+1}}</td>
- <td>{{item.name}}</td>
- <td>{{item.age}}</td>
- <td>
- <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index"> 删除 </button>
- </td>
- </tr>
- <tr v-show="myData.length!=0">
- <td colspan="4" class="text-right">
- <button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer"> 删除全部 </button>
- </td>
- </tr>
- <tr v-show="myData.length==0">
- <td colspan="4" class="text-center text-muted">
- <p > 暂无数据....</p>
- </td>
- </tr>
- </table>
- <!-- 模态框 弹出框 -->
- <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <h4 class="modal-title"> 确认删除么?</h4>
- <button type="button" class="close" data-dismiss="modal">
- <span>×</span>
- </button>
- </div>
- <div class="modal-body text-right">
- <button data-dismiss="modal" class="btn btn-primary btn-sm"> 取消 </button>
- <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)"> 确认 </button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
运行效果:
来源: https://www.cnblogs.com/le220/p/9501071.html