您的位置: 首页  >  文章  >  vue 学习目录

vue 学习目录

分类: 文章 • 2023-11-16 10:05:04

vue 学习目录

一 、Vue.js 安装

下载 Vue.js

  • 独立版本
    • 下载 Vue.js
  • 使用 CDN 方法
    • 国内还没发现哪一家比较好，目前还是建议下载到本地。

NPM 方法

创建一个基于 webpack 模板的新项目
vue init webpack my-project
cd my-project
npm install
npm run dev

二、Vue.js 目录结构

vue 学习目录
vue 学习目录
vue 学习目录
尝试修改初始化项，将 Hello.vue 修改为以下代码：
vue 学习目录

Vue.js 起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

<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', //el:它是 DOM 元素中的 id
        data: {//data 用于定义属性
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: { //methods 用于定义的函数，可以通过 return 来返回函数值。
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

除了数据属性，Vue 实例还提供了一些有用的Vue实例属性与方法,它们都有前缀 $，以便与用户定义的属性区分开来

<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.$data === data) // true
document.write("<br>") // true
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>

Vue.js 模板语法

插值

数据模型到视图的这一过程我们叫插值

  • 属性插值 {{数据名称}} title,src,data-id,style,class样式color等, 
<div class="app" id="app" data-id="{{id}}" title="{{title}}" style="color: {{obj.color}}">
	{{msg}}
</div>```
  • 单次插值 {{*数据的名称}}

插值的内容在数据改变时会改变，有时我们需求是插入之后就不要再变了，此时需要单次插值
<div id="app">{{*msg}}</div>
当再次改变数据的内容时候，不想改变视图的原内容，可以单次插值

  • 过滤html {{{数据的名称}}}

将字符串中的html元素转义，这样直接将html渲染页面中
<div id="app">{{msg}}</div> => 页面中是：快乐大<i>本</i>营
msg: '快乐大<i>本</i>营' i{color:red;}
改成<div id="app">{{{msg}}}</div> => 页面中是：快乐大本营 //本(i)是红色的。

  • 插值表达式

插值的过程中可以应用js表达式：加减乘除，字符串拼接，方法调用等等
<strong>{{size.width * size.height}}</strong> //10000
<p>{{msg.toUpperCase()}}</p> //ABC
data{ msg: ‘abc’ , size: {width: 100,height: 100}}

  • 插值过滤器 {{数据 | 过滤器的名称}}

有多个地方处理一个数据，我们可以将这些处理方法提炼出来作为过滤器复用,Vue内置很多过滤器，我们可以直接使用

<strong>{{num | currency}}</strong> //$100.00
<p>{{*a | currency}}</p> //$200.00
<p>{{{msg | uppercase}}}</p> //ABC

  • 动态插值

插值方式都是静态的，属性数据的结果是什么，渲染页面就是什么
动态插值是说在插值前，可以对数据执行一次函数，这个函数的返回值就是我们要插入页面中的内容
静态插值 写在data属性
动态插值 写在computed属性中
动态插值（computed）与静态插值（data）属性一样，属性值都是一个对象
不同点
静态插值对应对象的属性是一个值类型的数据
动态插值对应对象的属性是一个函数，并且函数要有返回值，这个返回值就是将要插入页面中的数据
<div>{{size}}</div> //10000
data: {width: 100,height: 100}
// 定义的动态属性
computed: {
// size要获取width和height的乘积
size: function () {
// console.log(arguments) vue的实例化对象
// console.log(this) vue的实例化对象
return this.width * this.height
}

文本插值 ：使用 {{…}}（双大括号）的文本插值

<div id="app">
  <p>{{ message }}</p>
</div>

Html插值 ：使用 v-html 指令用于输出 html 代码

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

属性

HTML 属性中的值应使用 v-bind 指令。

v-bind:的基本用法：http://www.cnblogs.com/xueweijie/p/6856095.html

  • v-bind:class（根据需求进行选择）
  • v-bind:style (根据需求进行选择，驼峰式)
  • v-bind:src
  • v-bind:title

判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

  <div v-bind:class="{'class1': class1}">
    v-bind:class 指令
  </div>
 <script>
	new Vue({
	    el: '#app',
	  data:{
	      class1: false
	  }
	});
</script>

相关推荐