Vue.js核心概念与实战-优快云博客

本文链接：https://blog.youkuaiyun.com/JavaFog/article/details/105451076

Vue的学习笔记

1.vue基本知识

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

var vm = new Vue({
		//获取标记 例如id
		el: '#vue_det',
        data: {
        //写属性【变量名：内容】
            site: "菜鸟教程",
            alexa: "10000"
        },
        methods: {
        //写方法，定义函数
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
})

2.$定义了vue自带的属性和方法，以便和自定义区分

2.vue模板语法

1.插值

文本：{{…}}（双大括号）的文本插值–》只能用来显示，不能修改样式
```
  <p>{{ message }}</p>
```
HTML：使用 v-html 指令用于输出 html 代码–》可以修改样式

 <div v-html="message"></div>
 <script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

2.指令：

【 v- 前缀的特殊属性：参数在指令后以冒号指明】

v-bind 指令：被用来响应地更新 HTML 属性；用于样式绑定，处理class和style

缩写：直接省略

eg：
```
	 <div v-bind:class="{'class1': use}">
	<pre><a v-bind:href="url">菜鸟教程</a></pre>
	
```

在标签里的class前加v-bind {}里前面是class名后面是表达式（通常是写在script-构造器-data里的表达式，常用来判断样式是否显示在该元素上）表达式的结果类型除了字符串之外，还可以是对象或数组（竟然还有三目运算，优秀）

v-bind ：class={‘class名’：‘表达式’}

<style>
.act {
    width: 100px;
    height: 100px;
    background: green;
}
</style>

<div id="app">
  <div v-bind:class="{ act: isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

在 v-bind:style 直接设置样式

 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
	fontSize: 30
  }
})
</script>

也可以直接绑定到一个样式对象中

<div id="app">
  <div v-bind:style="styleObject">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'green',
      fontSize: '30px'
    }
  }
})
</script>

2.v-model 指令：在 input 输入框中用v-model 来实现双向数据绑定

用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

3.v-on ：用于绑定事件的，按钮的事件我们可以使用v-on 监听事件，并对用户的输入进行响应。

缩写：@

通常情况下，我们需要使用一个方法来调用 JavaScript 方法。v-on 可以接收一个定义的方法来调用。

<div id="app">
   <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
	  if (event) {
		  alert(event.target.tagName)
	  }
    }
  }
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

事件修饰符

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符

v-on:keyup.XXX

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

4.v-if：条件判断

v-if：“参数” 在data里给参数定义为true 或 false ，可以使标签生效或失效

5.v-else ：给 v-if 添加一个 “else” 块–》但和v-if不能作用在同一标签块中，将

看作{ }

6.v-else-if：同上，与java用法一致

7.v-show：根据条件展示元素

8.v-for：for循环可以写在template或其他行元素上–》但是数据存放在数组里

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

9.v-for 迭代器相当于foreach

 <li v-for="value in object">
    {{ value }}
    </li>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
	}
  }
})
</script>

可以有第二个参数为键名

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

第三个参数为索引：

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

也可以迭代整数

循环整数

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

自定义指令：

10.v-focus 全局指令：可以用在登录注册页面

例如：在页面加载时，元素获得焦点

<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

directives写一个局部的指令，让v-focus作用在一个实例里

<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>

3.写法格式

1.计算属性

1.计算属性关键词: computed。

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      //一个字符串分割反转并拼接
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

2.methods

和computed效果一样，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

4.表单元素—常与v-model连用

1.多行输入框标签：textarea

2.label标签：为 input 元素定义标注， for 属性应当与相关元素的 id 属性相同。

属性	值	描述
for	id	规定 label 绑定到哪个表单元素。
form	formid	规定 label 字段所属的一个或多个表单。

3.复选框：input中 type=“checkbox”

如果是单个checkbox 构造器中data的表达式可以是false或ture；如果是多个，对应的表达式可以是数组—》checkedNames: [ ]

4.单选按钮：type=“radio”

5.select标签下拉列表：

<select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>

6.v-model修饰符

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

.number:如果想自动将用户的输入值转为 Number 类型

.trim:如果要自动过滤用户输入的首尾空格