vue学习笔记--学习参考+一些基本注意点

最新推荐文章于 2023-03-17 17:05:48 发布

qq_36580561

最新推荐文章于 2023-03-17 17:05:48 发布

阅读量93

点赞数

分类专栏： vue学习笔记文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/qq_36580561/article/details/110387939

版权

vue学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

-------------------------------------------vue小白，从菜鸟教程学起，本篇为个人学习笔记，主要以个人为主------------------------------------------------------------------------

vue组件官方文档

vuex学习实战：参考资料

vue全家桶（可以参考该项目的实现来对vue进行实践学习）：参考博客

参考链接：.vue文件的生成与使用

1.template中写html。

2..vue文件中不用Vue创建实例，用export default。

3.在route.js中设置跳转路径时，如果调到某一文件夹下的 index.vue文件，则可以省略文件夹后的 index.vue。

参考教程：菜鸟教程

1. Vue 构造器中的el 参数对应于 DOM 元素中的 id。

2.vue对象中设置data的元素属性，也会改变data的元素，反之也会如此。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    // 它们引用相同的对象！
    document.write(vm.site === data.site) // true
	document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.site = "Runoob"
    document.write(data.site + "<br>") // Runoob

    // ……反之亦然
    data.alexa = 1234
    document.write(vm.alexa) // 1234
    </script>
</body>
</html>

3.HTML 属性中的值应使用 v-bind 指令控制。

实践例程

4. v-model 指令可使用在 input、select、textarea、checkbox、radio 等表单控件元素上，实现数据的双向绑定。

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

5.过滤器函数接受表达式的值作为第一个参数。过滤器接受参数，可以串联（？此处不解）。

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

<!--过滤器串联-->
{{ message | filterA | filterB }}
<!--带参过滤，message还是第一个参数-->
{{ message | filterA('arg1', arg2) }}

6.缩写

v-blind缩写

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

v-on缩写

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

7.v-if, v-else, v-else-if；v-show（控制当属性满足条件时显示对应文字）

<h1 v-show="ok">Hello!</h1>

8.v-for迭代整数时，默认从1开始。

<li v-for="n in 10">

9.样式绑定--对象绑定

当对v-bind使用对象语法时，当key中含有js不支持的变量命名格式，如：-（不是下划线）和空格，这时就需要用' ' 引起来。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})
</script>
</body>
</html>

qq_36580561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记--学习参考+一些基本注意点

参考链接：.vue文件的生成与使用1.template中写html。2..vue文件中不用Vue创建实例，用export default。3.在route.js中设置跳转路径时，如果调到某一文件夹下的 index.vue文件，则可以省略文件夹后的 index.vue。参考教程：菜鸟教程1.Vue 构造器中的el 参数对应于DOM 元素中的 id。...
复制链接

扫一扫