vue学习：目录结构与基础语法

最新推荐文章于 2022-12-01 22:21:23 发布

冰激凌啊

最新推荐文章于 2022-12-01 22:21:23 发布

阅读量321

点赞数

本文链接：https://blog.csdn.net/gyxx1998/article/details/105811855

版权

实习日记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

01 安装

1、 node.js安装

2、全局安装 vue-cli
	cnpm install --global vue-cli

3、创建项目
	vue init webpack my-project
		// 创建一个基于 webpack 模板的新项目，my-project可以在前方加盘符指定路径
		// 这里需要进行一些配置，默认回车即可

4、进入项目，安装并运行：
		cd my-project
		cnpm install
		cnpm run dev

5、成功执行下方命令后，浏览器访问 http://localhost:8080/
		Listening at http://localhost:8080

注意：对于以上已将源改为淘宝镜像的，可直接使用npm（而不是cnpm）

02 目录结构

在这里插入图片描述

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： - assets: 放置一些图片，如logo等。 - components: 目录里面放了一个组件文件，可以不用。 - App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 - main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

03 例子

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

讲解：

var vm = new Vue实例化 Vue
<div id="vue_det"> 和 el: '#vue_det',
id和el 标记的相同
这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。

04 模板语法

https://www.runoob.com/vue2/vue-template-syntax.html

4.1 插值

文本
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值
Html
使用 v-html 指令用于输出 html 代码
属性 css样式
HTML 属性中的值应使用v-bind 指令。
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。

4.2 指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上
参数
参数在指令后以冒号指明。
例如， v-bind 指令被用来响应地更新 HTML 属性：
v-on 指令，它用于监听 DOM 事件
修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

4.3 用户输入

在 input输入框中我们可以使用v-model指令来实现双向数据绑定
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

4.4 过滤器

Vue.js 允许自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示

4.5 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：v-bind和v-on

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

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

05 条件与循环

条件判断
v-if
v-else
v-else-if
我们也可以使用 v-show 指令来根据条件展示元素
v-show

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>



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

循环语句
循环使用 v-for 指令
① v-for指令需要以site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名
② v-for 可以通过一个对象的属性来迭代数据 value in object 和 (value, key) in object 和 (value, key, index) in object
③ n in 10

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>