20231019_vue学习

引入vue.js:

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> vue.js
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> 路由

vue模板语法

• v-html:添加html模板
• v-bind:添加属性，缩写：
• v-on:监听事件，缩写@
• v-model:数据双向绑定
• 过滤器{{message | filterA | filterB}} {{message | filterA(‘arg1’,arg2)}}

vue条件语句

• v-if:条件判断
• v-else:给v-if添加一个else块
• v-else-if:用作v-if的else-if块
• v-show:根据条件展示元素

vue循环语句

• v-for:需要以site in sites形式的特殊语法，sites是源数据数组，site是数组元素迭代的别名

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

vue计算属性

• computed:计算属性
• computed vs methods:computed基于依赖缓存，相关依赖改变会重新取值；methods在重新渲染，函数总会重新调用执行
• computed属性默认只有getter

vue监听属性

watch:响应数据的变化，监听data数据变化执行相关的方法

vue表单

input:输入框 checkbox：选择框 radio：选择原点 select：下拉框 textarea：大文本
<label for="对应框">值</label>:可以扩大选择范围

• .lazy:lazy修饰符，转变为change事件同步
• .number：处理数字
• .trim:去除空格

vue组件

组件（Component）可以扩展HTML元素，封装可重用代码
语法：Vue.component(tagName,options)

• 全局实例，在创建实例之前提前创建

<div id="app"><runoob></runoob>
</div><script>
// 注册
Vue.component('runoob', {template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({el: '#app'
})
</script>

• 局部实例，在实例内进行创建

<div id="app"><runoob></runoob>
</div><script>
var Child = {template: '<h1>自定义组件!</h1>'
}// 创建根实例
new Vue({el: '#app',components: {// <runoob> 将只在父模板可用'runoob': Child}
})
</script>

• prop：子组件用来接收父组件传递过来的数据的一个自定义属性，父组件的数据通过props把数据传给子组件，子组件需要显示的用props选项声明"prop".

vue路由

单独使用需要引入：<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>

router-link 相关属性：

• to:表示目标路由的链接
• replace:设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录
• append:设置 append 属性后，则在当前 (相对) 路径前添加其路径
• tag:有时候想要 router-link 渲染成某种标签，例如 li
• active-class:设置 链接激活时使用的 CSS 类名
• exact-active-class:配置当链接被精确匹配的时候应该激活的 class。
• event:声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组