Vue 的简单入门理解

Z时代
2024-01-10
分类：综合

vue

一.

angular适合很大的项目mvvm，react干什么都行的组件式，vue是个轻量级mwwm适合中小型应用。

感觉react全家桶未来应该会走红，中小项目里vue会是不错的选择，angular在版本稳定下来之前还是先观望吧。。

顺便说下上手难度，vue不难（只要不是一上来就webpack，cli），angular1.x也不难（2.x没用过，感觉改的有点多，等版本相对稳定再说），react曲线感觉难一点点。

火大概是raect>angular>vue的，但angular在降温，react在继续上升，vue也在上升期。

官网： http://vuejs.org/ （可选中文版）

Api : https://cn.vuejs.org/v2/api/

相关网址：https://www.awesomes.cn/repo/yyx990803/vue

文章：http://www.wtoutiao.com/p/6e4lwMF.html

个人案例：http://web.jobbole.com/89976/

官网vue资料总结：

1.Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

另一方面，Vue 完全有能力驱

动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

vue 内部封装好的参数，函数：

相关网址： http://www.cnblogs.com/like-xcm/p/5956848.html

var vm = new Vue({

el: "选择器", 挂载到页面的那个元素里，即确定vue的作用范围外部可通过vm.$el访问，得到的是一个原生dom元素，可进行对应操作

a: '', //自定义属性外部可通过vm.$options访问

data: { }, //实例属性都在这里面，外部通过实例名,即vm.$data调用

computed: { }, //计算属性，也是实例属性，只是以方法的形式存在，并可以有逻辑运算的属性

method: { }, //实例方法都在这里

watch: { }, //对data和computed的属性进行监听，当属性有变化时自动触发，以方法的形式存在外部通过$.watch调用

created: function(){ 实例已经创建 }

beforeCompile: function(){ 模块编译之前 }

compiled: function(){ 模块编译之后；即模板占位符被是内容替换}

ready: function(){ 模板插入到文档中了；相当于window.onload }

beforeDestroy: function(){ 对象销毁之前 }

destroyed: function(){ 对象销毁之后 }

});

注意：

①以上属性和方法，实例内部都通过this调用,外部则通过对应的实例方法访问

②在vue的生命周期过程中，它自身还提供了一系列的钩子函数供我们使用，进行自定义逻辑的注入

③以上4个方法在对象被实例化后即按顺序执行，以下2个方法需通过事件触发，并通过调用实例名.$destory()才执行

二.

代码： ①按照平常的html页面写（第一个例子引入jq，后面都不需要jq）

②同时引入 vue.js ，以及就专门的vue使用语法

（vue.js 地址： https://unpkg.com/vue/dist/vue.js）

1.第一个例子： hello vue

<body>

</div>

$(function(){

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

app;

console.log(app.$data);

})

</script>

</body>

console.log(app.$data);

注意： ①在控制台更改message的值，页面中的值也会随着变化

② 只在第一次打印hellovue时：app 需要再执行一次，页面才能显示输出message的值，

③输出 app message信息时，html页面内 {{message}} 要写在 el 所代表的 id 标签内部

三.

1.v-bind 指令：控制台显示message信息已添加上新内容，但是没显示出来

指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性

<span v-bind:title="message"> 在原有内容基础上添加新内容 </span>

<p> {{message}}}</p> 

</div>

$(function(){

var app2 = new Vue({

el: '#app-2',

data: {

message: 'js新增内容 ' + new Date()

}

})

app2;

console.log(app2.message);

console.log(app2.$data);

})

</script>

注意：

①console.log(app2.$data)

②console.log(app2.message);

四.

1.v-if

app3: seen:true 显示p标签内容

app3 seen: false 隐藏p标签内容

</div>

$(function(){

var app3 = new Vue({

el: '#app-3',

data: {

seen: true

}

})

</script>

注意：这个例子演示了我们不仅可以绑定 DOM 文本到数据，

也可以绑定 DOM 结构到数据

1.v-for

<ol>

</li>

</ol>

</div>

$(function(){

var app4 = new Vue({

el: '#app-4',

data: {

todos: [

{ text: 'Learn JavaScript' },

{ text: 'Learn Vue' },

{ text: 'Build something awesome' }

]

}

})

</script>

输出： console.log(app4.todos.push({ text: 'New item' }))

发现： ul列表又添加了一行数据

五.

1.v-on : click=“函数（方法）名”

<p>{{ message }}</p>

<button v-on:click="reverseMessage">Reverse Message</button>

</div>

$(function(){

var app5 = new Vue({

el: '#app-5',

data: {

message: 'Hello Vue.js'

methods: {

reverseMessage: function () {

this.message = this.message.split(' ').reverse().join(' , ')

}

})

</script>

触发事件前触发事件后

2.v-on : click=“函数（方法）名”

<p>这个按钮被点击了 {{ counter }} 次。</p>

</div>

var app = new Vue({

el: '#app',

data: {

counter: 0

}

})

</script>

2.v-on : click=“函数（方法）名”

<button v-on:click="greet">Greet</button>

var app = new Vue({

el: '#app',

data: {

counter: 0,

info: "hello world"

methods: {

greet: function(event){

alert(this.info)

}

})

注意：methods 有 s,不然会报错（greet not defined）

2.v-on :keyup.键名="函数名"

methods: {

greet: function(event){

alert(this.info)

say: function(msg){

alert(msg);

warn: function (message, event) {

// 现在我们可以访问原生事件对象
console.log(event)

if (event) event.preventDefault()

alert(message)

submit: function(){

console.log("按键13触发")

}

全部的按键别名：

.enter

.tab

.delete (捕获 “删除” 和 “退格” 键)

.esc

.space

.up

.down

.left

.right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

六.

添加id，属性href,disabled等 - javascript语句判断 - 事件绑定 - 过滤器

1.v-model ：输入框的内容改变，p标签的内容也随之改变。

<p>{{ message }}</p>

</div>

$(function(){

var app6 = new Vue({

el: '#app-6',

data: {

message: 'Hello Vue!'

}

})

</script>

2.v-once ：一次加载后台数据改变页面显示内容也不再改变

<body>

message: {{message}}

<p v-once>This will never change: {{ msg }}</p>

</div>

var app = new Vue({

el: ".app",

data: {

message: "hello vue",

msg: "v-once 一次加载不再改变"

}

})

console.log(app)

</script>

效果图如下：

3.v-html ：添加一个html标签片段

v-html="data 数据变量名"

4.v-bind:id="data参数名" ：添加id值

v-bind:disabled="data参数名" ：添加disabled属性

<body>

message: {{message}}

<p v-once>This will never change: {{ msg }}</p>

<div v-bind:id="dynamicId">v-bind:id 添加id值 </div>

<button v-bind:disabled="someDynamicCondition1">Button: v-bind:disabled="false"</button>

<button v-bind:disabled="someDynamicCondition2">Button: v-bind:disabled="true"</button>

</div>

var app = new Vue({

el: ".app",

data: {

message: "hello vue",

msg: "v-once 一次加载不再改变",

rawHtml: "<span>添加html标签片段</span>",

dynamicId: "d1",

someDynamicCondition1: false,

someDynamicCondition2: true

}

})

console.log(app.$data)

</script>

效果图如下：

5.使用javascrpt 表达式

表达式限制：每个绑定都只能包含单个表达式

<p>number初始值为1： {{number+1}}</p>

<p>message字符处理,初始值abcd：{{ message.split('').reverse().join('-') }}</p>

</div>

var app = new Vue({

el: ".app",

data: {

number: 1,

ok: true,

message: "abcd",

id: "d1",

someDynamicCondition1: false,

someDynamicCondition2: true

}

})

console.log(app.$data)

</script>

效果图如下：

注意： javascript 可以直接使用 Data,Math

<p>number初始值为1： {{number+1}}</p>

<p>message字符处理,初始值abcd：{{ message.split('').reverse().join('-') }}</p>

<p>{{new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds()}}</p>

</div>

var time = new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds();

var app = new Vue({

el: ".app",

data: {

number: 1,

ok: true,

message: "abcd",

id: "d1",

time: time,

someDynamicCondition1: false,

someDynamicCondition2: true

}

});

console.log(app.$data,Math.PI, time)

</script>

6.v-bind:href="url" 链接

<a v-bind:href="url" v-bind:target="target">国融证券官网</a>

url: "http://www.grzq.com/osoa/views/index.html",

target: "_blank"

注意： v-bind:href="url"

这里的url 不能直接写成跳转地址，不然会报错。

7.v-on:submit.prevent="函数名"

<span>{{iptstate}}</span>

</form>

var app = new Vue({

el: ".app",

data: {

number: 1,

ok: true,

message: "abcd",

id: "d1",

time: time,

url: "http://www.grzq.com/osoa/views/index.html",

target: "_blank",

iptstate: "",

onSubmit: function(e){

console.log("onSubmit表单提交");

this.iptstate = "onSubmit表单提交";

}

});

效果图如下：点击提交按钮触发函数

8.filter 过滤器

capitalize 已经被移除，需要的话得自己封装方法

七.自定义组件（标签）： todo-item

<body>

<ol>



<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>

</ol>

</div>

Vue.component('todo-item', {

props: ['todo'],

template: '<li>{{ todo.text }}</li>'

})

var app7 = new Vue({

el: '#app-7',

data: {

groceryList: [

{ text: 'Vegetables' },

{ text: 'Cheese' },

{ text: 'Whatever else humans are supposed to eat' }

]

}

})

</script>

</body>

八.

var data = { a: 1 }

var vm = new Vue({

data: data
})

vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2

data.a

console.log(vm.a,data.a) // 2 2
// 设置原始数据也会影响到属性
data.a = 3

vm.a

console.log(vm.a,data.a) // 3 3

</script>

注意：只有这些被代理的属性是响应的。

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

created 这个钩子在实例被创建之后被调用

var vm = new Vue({

data: {

aa: 1

created: function () {

// `this` 指向 vm 实例
console.log('aa is: ' + this.aa); // aa is: 1

}

})

九.

1.判断添加 class: active

isActive : true 添加active

false 不添加active

<body>

</div>

var myVue = new Vue({

el: ".test",

data: {

isActive1: true,

isActive2: false,

rawId: "ID1",

formatId: "id2"

}

})

</script>

</body>

2.添加多个class (只要为true,就会添加)

3.class 绑定在一个对象里

var myVue = new Vue({

el: ".test",

data: {

isActive1: true,

isActive2: false,

hasError: true,

rawId: "ID1",

formatId: "id2",

classObject: {

active: true,

'text-danger': true

}

})

4.class 包含在数组里

var myVue = new Vue({

el: ".test",

data: {

isActive1: true,

isActive2: false,

hasError: true,

rawId: "ID1",

formatId: "id2",

classObject: {

active: true,

'text-danger': true

activeClass: 'active',

errorClass: 'text-danger'

}

})

</script>

5.class 三元表示

var myVue = new Vue({

el: ".test",

data: {

activeClass: 'active',

errorClass: 'text-danger'

}

})

6.添加绑定 style 样式

<div v-bind:style="styleObject">添加style样式对象</div>

</div>

var myVue = new Vue({

el: ".test",

data: {

styleObject: {

color: "#fff",

backgroundColor: "blue"

}

})

</script>

7.多个style样式

var myVue = new Vue({

el: ".test",

data: {

styleObject: {

color: "#fff",

backgroundColor: "blue"

baseStyles: {

color: "#fff",

backgroundColor: "blue"

otherStyles: {

border: "2px solid red",

margin: "10px"

}

})

8.css3 过渡效果

<!DOCTYPE HTML>

<html>

<head>

<title>vue简单例子</title>

<style>

.fade-enter-active, .fade-leave-active {

transition: opacity .5s
}

.fade-enter, .fade-leave-active {

opacity: 0

}

</style>

</head>

<body>

Toggle

</button>

<p v-if="show">hello</p>

</transition>

</div>

new Vue({

el: '#app',

data: {

show: true

}

})

</script>

</body>

</html>

十.

1.简单的条件渲染

</div>

var myVue = new Vue({

el: ".test",

data: {

ok: true,

no: false

}

})

</script>

2.条件组

v-if v-else-if v-else

2.js数组过滤

data: {

items: [

{message: 'Foo' },

{message: 'Bar' }

msg: [

{message: 'Foo' },

{message: 'Bar' }

arr: [1,2,3,46,6],

object: {

FirstName: 'John',

LastName: 'Doe',

Age: 30

numbers: [ 1, 2, 3, 4, 5, 6 ]

computed: {

evenNumbers: function () {

return this.numbers.filter(function (number) {

return number % 2 === 0

})

}

十一.

1.复选框：根据选择实时显示选中内容，

选中就在数组中添加内容，取消选中就在数组中删除数据

<br>

<span>Checked names: {{ checkedNames }}</span>

</div>

var app = new Vue({

el: '#app',

data: {

checkedNames: []

}

})

</script>

注意：单选框，下拉框同样如此。

单选框：

<br>

<br>

<span>Picked: {{ picked }}</span>

下拉框：

</select>

<span>Selected: {{ selected }}</span>

默认选中的下拉框：

</option>

</select>

<span>Selected: {{ selected2 }}</span>

data: {

checkedNames: [],

picked: [],

selected: [],

selected2: 'A',

options: [

{ text: 'One', value: 'A' },

{ text: 'Two', value: 'B' },

{ text: 'Three', value: 'C' }

]

}

以上是 Vue 的简单入门理解的全部内容，来源链接： utcz.com/z/377119.html

Vue 的简单入门理解

其他人也看了：