基础

2019-12-24 本文已影响0人 Cherry丶小丸子

lifecycle.png

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

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

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

不要将Vue实例绑定到<html>或<body>元素上。

var vm = new Vue({
    el:"body或者html", //不允许绑定到body或者html上
    data:{
        message:'Hello Vue!!!'
    }
})

控制台编写app实例变量名.data里面的数据名
控制台编写app实例变量名.data里面的数据名 = 自己写的值

Object.freeze() //阻止修改现有的属性

<div id="app">{{message}}</div>//文本插值
<span v-bind:title="mouststop">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>//绑定

文本插值的时候需要{{}}，属性绑定 不需要写{{}}

var vm = new Vue({
    el:"#app",
    data:{
        message:'helloword'
    }
})

v-model 双向绑定只会体现在UI控件中，只能应用在有value属性的

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令

<a v-bind:href="url">...</a>
缩写只在其有参数的时候才可用
<a :href="url">...</a>

<a v-on:click="doSomething">...</a>
缩写只在其有参数的时候才可用
<a @click="doSomething">...</a>

计算属性和方法的区别
不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性
v-once 指令
v-html指令

Class 与 Style 绑定
绑定HTML class
1.对象语法
2.数组语法
3.用在组件上

v-for和v-if当它们处于同一节点，v-for 的优先级比 v-if 更高
如果你的目的是有条件地跳过循环的执行，那么可以将 v-if置于外层元素 (或 <template>)上

[ v-cloak]{
display:none;
}
<div id="app" v-cloak></div>

基础

猜你喜欢

热点阅读