Vue.js菜鸟教程⾃学（⼀）
导⼊js:
⼀、hello vue
javascript和mysql菜鸟教程<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
message:'Hello Vue.js!'
}
})
</script>
</body>
</html>
⼆、vue起步
1.每个 Vue 应⽤都需要通过实例化 Vue 来实现。
2.Vue构造器中有⼀个el参数来确定元素
⽤data定义属性，methods定义函数，{{}}⽤于输出对象属性和函数返回值。
<title>Document</title>
sql2008教程视频<script src="/vue/2.2.2/vue.min.js"></script>
</head>
<body>
Vue构造器:
<div id="vue_det">
<h1>site:{{ site }}</h1>
<h1>url:{{ url }}</h1>
<h1>{{ details() }}</h1>
<h1>answer:{{ self() }}</h1>
</div>
Vue事例创建：
<div class="vue2">
<h1>site:{{ site2 }}</h1>
<h1>url:{{ url2 }}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#vue_det',
inherit的名词
data:{
site:"菜鸟教程",
url:"www.runoob",
ale:"10000"
},
methods:{
details:function(){
return this.site+"技术不是梦"
},
self:function(){
var x=1,y=2;
return x+y;
}
}
})
var data2 = {site2:"菜鸟教程2",url2:"www2"}
var vm2 = new Vue({
el:'.vue2',
data : data2
})
console.log(vm2.site2===data2.site2);
vm2.site2="xxxx";
</script>
</body>
</html>
3.当⼀个Vue实例被创建时，他向Vue的响应式系统中加⼊了其data对象中能到的所有属性。当这些属性的值发⽣变化时，html视图将也会产⽣相应的变化。
4.除了数据属性，Vue实例还提供了⼀些有⽤的实例属性和⽅法。他们的前缀都是$，以便于⽤户定义的属性分开来。
三、Vue模板语法
1.插值：{{}}
使⽤v-html来输出html代码
属性：HTML 属性中的值应使⽤ v-bind 指令。
以下实例判断 class1 的值，如果为 true 使⽤ class1 类的样式
<title>Document</title>
</head>
<script src="/vue/2.2.2/vue.min.js"></script>
<style type="text/css">
.class1{
background: #444;
color: #eee;
}
.
class2{
background:red;
color: #000;
}
</style>
前端面试题2022掘金<body>
<div id="app">
<label>修改颜⾊</label><input type="checkbox" v-model="use" id="r1">  <br><br>
<div v-bind:class="{'class1':use}">
<div v-bind:class="{'class2':!use}">
v-bind:class指令
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
use:false
}
})
</script>
</body>
</html>
表达式：Vue.js 都提供了完全的 JavaScript 表达式⽀持。
<title>Document</title>
</head>
<script src="/vue/2.2.2/vue.min.js"></script>
<body>
<style type="text/css">
#list-1{
background: red;
}
</style>
<div id="app">
{{5+5}}<br>
{{ok ? 'YES':'NO'}}<br>
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id">{{message}}</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
3699小游戏
ok:true,
message:'RUNOOB',
id:1
}
})
</script>
</body>
</html>
2.指令
vae歌曲指令是带有v-前缀的特殊属性。
指令⽤于在表达式的值改变时，将默写⾏为应⽤到DOM上。如下例⼦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<p v-if='!seen'>xxxxxxxx</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
seen:true
}
})
</script>
</html>
这⾥， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插⼊ p 元素。
2.参数
<title>Document</title>
</head>
<script src="/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
url:'www.runoob'
}
})
</script>
</body>
</html>
参数在指令后以冒号指明。例如， v-bind 指令被⽤来响应地更新 HTML 属性。
另⼀个例⼦是 v-on 指令，它⽤于监听 DOM 事件：
在这⾥参数是监听的事件名。
3.修饰符
修饰符是以半⾓句号 . 指明的特殊后缀，⽤于指出⼀个指令应该以特殊⽅式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调⽤ event.preventDefault()：
````

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。