html回顾及vue.js在html中使用(三)

Lchannel

4884人浏览 · 2017-08-17 15:25:47

Lchannel · 2017-08-17 15:25:47 发布

jquery以及css不在回顾，粗略看了一遍，今天开始vue.js学习。如果遇到没有接触的可以及时学习一下。

开始vue.js之旅

学习vue.js看官网，没有比这更好的资料了。

首先我们需要知道 vue.js是什么?

首先，它是一个js框架，是一套构建用户界面的渐进式框架.

与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

采用边看边练的形式，写html文件然后运行。

新建test.html文件
打开并编辑：
在head标签引入vue包

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://unpkg.com/vue"></script>
</head>
<body>

  <div id="app">
    <p style="color:red">{{ message }}</P>
  </div>

  <script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
  </script>
</body>
</html>

运行之后出现：
Hello Vue!
修改script代码：

  <script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
  app.message = "wow change!";
  </script>

运行：
wow change!

条件与循环：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://unpkg.com/vue"></script>
</head>
<body>

  <div id="app-3">
    <p v-if="seen">现在你看到我了</p>
  </div>

  <script>
  var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: false
  }
})
  </script>
</body>
</html>

运行：

结果就是什么都不显示，隐藏。

处理用户输入：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://unpkg.com/vue"></script>
</head>
<body>

  <div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

  <script>
  var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
      })
  </script>
</body>
</html>

运行：
这里写图片描述

写法上不同点：onclick换成了v-on:click 方法 methods:{方法：function(){}}.
组件化

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

//使用该组件
<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

//组件改进
Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义属性
  // 这个属性名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

v-bind使用：
html使用组件：

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供待办项对象
      待办项对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

js创建绑定赋值：

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其他什么人吃的东西' }
    ]
  }
})

此时对vue.js有一定的了解了

下面具体学习下：

构造器
每个vue.js通过vue创建实例

var vm = new Vue({
  // 选项
})

可扩展：

var MyComponent = Vue.extend({
  // 扩展选项
})
// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

既然是组件，就有属性方法吧来看下：
代理data属性
var data1 = { a: 1 }
var vm = new Vue({
data: data1
})
生命周期：
这里写图片描述
模板语法：
文本：
双大括号

<span>Message: {{ msg }}</span>

想要输出纯html,使用v-html 指令:

<div v-html="rawHtml"></div>

支持JavaScript表达式

指令：
指令（Directives）是带有 v- 前缀的特殊属性

参数：
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url"></a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

修饰符：
修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

过滤器：

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

缩写：
v-bind

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

计算属性：
html:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

js:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

需要处理的可以放在computed中

Class 与 Style 绑定：
class绑定:
我们可以传给 v-bind:class 一个对象，以动态地切换 class 。

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值。
style绑定：

html:

<div v-bind:style="styleObject"></div>

js:

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

条件渲染：
v-if

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

列表渲染：
v-for
v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
html:

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

js:

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
})

运行：这里写图片描述

剩下的大体看了一遍有的需要慢慢研究。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^