vue指令都是v-指令的写法
模板里面还可以写运算公式{{}}
{{1+1}}输出的是2
{{1+1!==2&&"我是谁我在哪"}}<br>
<!-- 前面的运算公式正确就输出后面的 不正确就输出false 这是两元运算符-->
{{1+1===2&&"我是谁我在哪"}}<br>
{{1+1===2? "正确的" : "错误的"}}
<!-- 还可以判断三元运算符 如果正确就输出前面的 如果错误就输出后面的 -->
v-text可以替换插值表达式 如果有v-text那么插值不起作用
v-html指令可以转义html标签，插值表达式不能转义html标签
当网络不好的时候在引用vue的时候会有延迟 它会首先加载html标签 先把模板展示出来 然后才会解析模板里面的内容
v-cloak可以解决该问题
v-cloak指令是在Vue实例化之前才有效，配合css可以实现 [v-cloak] 给需要用的元素加上这个属性 然后设置display:none
v-for用于循环渲染数据
v-for="(item,index) in list"遍历数组
v-for="(value,index) in obj"遍历对象
v-for="n of 100" {{n}} 遍历数字
v-if v-else可以控制dom节点直接移除或者插入
<spanv-if="status===true">{{message}}</span>
<spanv-show="status===true">{{message}}</span>
v-show 是通过改变style的display 来确定该节点是否显示，这种是CSS的显示隐藏的操作，对于需要频繁显示和隐藏的节点，特别实用，比如：弹窗，手机注册和邮箱注册的切换
v-on:事件名绑定点击事件 可以缩写成@事件名
vue里面的方法必须写在methods里面
v-bind:属性="属性"动态的绑定元素的属性可以简写成:属性
v-model的原理
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件：
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop并将 change 作为事件。
<divid="app">
<inputtype="text":value="inputValue"@input="addText">
<p>{{inputValue}}</p>
</div>
<scriptsrc="./vue.min.js"></script>
<script>
newVue({
el:"#app",
data: {
inputValue:""
},
methods: {
addText(e) {
this.inputValue=e.target.value
//绑定是input事件 在执行事件的时候把输入的值赋值给inputValue 然后通过改变inputValue的值 才改变上面p input标签的值
//需要注意的是input里面的值不是你输入的值 而是下面inputValue渲染上去的
}
}
})
</script>
v-model input输入同步的解决方法
<divid="app">
<inputtype="text"v-model="inputValue">
<p>{{inputValue}}</p>
</div>
<scriptsrc="./vue.min.js"></script>
<script>
newVue({
el:"#app",
data: {
inputValue:""
}
})
</script>
@click="事件名"如果不加() 事件console.log(e)就是事件本身 如果加()可以传任何参数 如果还想获取事件本身要传这个参数$event
Vue.js 为 v-on 提供了事件修饰符
.stop //阻止事件冒泡
.prevent //阻止默认事件
.capture
.self
.once //点击事件只会触发一次
.passive
@keyup.enter || @keyup.13 就是按下enter键的时候就可以执行事件
//按键修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
//你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
Vue.config.keyCodes.f1 = 112
.ctrl
.alt
.shift
.meta
//上面这几种键如果直接在@keyup后面直接加不会触发事件 然后再按下其他任意键松开就执行了 如果是单独加上这些键的对应的键码也可以执行
//还可以连着写 例如@keyup.ctrl.enter 意思就是按着ctrl键再按enter键执行函数
//.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.shift="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
//鼠标按钮修饰符
.left
.right
.middle
判断数组是否包含一个元素 arr.includes(value)
<selectv-model="address"@change="look">
<optiondisabledvalue="">请选择</option>
<optionvalue="+"></option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
//如果option设置了value值的时候不能设置为空 如果设置为空的话即使你设置了option的innerHTML值在选择select的时候也不会显示的
//如果不设置option的innerHTML的话 只设置了value的值 在Vue里面还是可以选择的到的
computed计算属性，它是有依赖缓存的，只有它依赖的数据发生了改变，才会从新计算，这个计算出来的值是可以当做data来用的，不用加(),必须要有一个return值
//当computed里面的方法依赖于data里面的其中的属性的属性值的时候，当属性值改变的时候 computed里面的方法返回的值也会实时发生改变
watch:Vue的侦听属性
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
//上面代码是命令式且重复的。将它与计算属性的版本进行比较：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
//这样写的意思就是fullName的值就等于这两个值拼接起来的返回的 值
}
}
})
filters的用法
<div id="app">
{{name | firstToUpperCase}}//前面的name就是后面filters里面firstToUpperCase的实参,这里面显示就是通过firstToUpperCase这个方法return的值
{{statusNumber | checkStatus}}
</div>
<script src="./vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
name: "huang",
statusNumber:"001"
},
filters: {
firstToUpperCase(value) {
return value.slice(0, 1).toUpperCase() + value.slice(1)
},
checkStatus(value) {
const status = {
"001": "未付款",
"002": "已付款",
"003": "未发货",
"004": "已发货"
}
return status[value]
}
}
})
</script>
