vue基础：官网学习vue.js
呈现知识点+踩过的坑
代码部分：
<!--Vue里面用‘,’做间隔，生成Vue时候记得要V大写-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p style="color:red;">1.插值文版变量用---{{}}，当用父节点用v-once时变量不再改变</p>
<div id="app" >
{{a}} {{b}}<!--文本插值/变量-->
<p style="color:red;">2.当标签作为变量值时，用“-v-html”使得直接保持标签内容---变量作为元素而不是普通的文本</p>
<p v-html="span"></p>
<p style="color:red;">3.动态绑定属性（可以的h是id/class/,,,），用“v-bind” class属性后的内容为变量名字（变量值为属性名），使得内容样式遵循属性的规定</p>
<div v-bind:class="color1">this is v-bind</div>
<p style="color:red;">4.用三目运算是当结果为false(不需要加引号)，则输出后面，其余都默认为真</p>
{{OK?"你真好看":"0k=false你有点好看哈"}}
<p style="color:red;">5.v-for 指令可以绑定数组的数据来渲染一个项目（循环）；用法：v-for="变量名 in 数组变量名"，html中：｛｛变量名.数组元素变量名｝｝</p>
<li v-for="words in array">{{words.text}}</li>
<p style="color:red;">6.处理用户输入：实现用户和应用的交互；v-modle实现表单和用户输入的绑定</p>
<p style="float:left;color:red;id ="lines>
(绑定不成功的原因：1，变量没有声明；2，您的id不是生成vue的变量；3，您可能用了v-once )
<p style="color:black;" class="lines">小声哭泣，呜呜呜~~~(注意别把model写成modle,如果单选框莫法实现就加一个相同的name属性)</p>
</p>
<p style="color:red">6.@“v-on”的缩写，事件监听可以使用 v-on 指令，可以用来关联vue中的methods事件</p>
<div style="clear:both;" class="checkbox">
<p>please choose one or more one who you like</p>
<input type="checkbox" id="jack" value="Jack" v-model="name">Jack</input>
<input type="checkbox" id="john" value="John" v-model="name">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="name">
<label for="mike">Mike</label>
<input type="checkbox" id="aimmer" value="Aimmer" v-model="name">
<label for="aimmer">Aimmer</label>
<br>
<span>I kown you like: {{ name }}</span>
</div>
<div class="radio">
<p>which annimal do you like?</p>
</br>
<input type="radio" id="pig" value="Pig" v-model="picked">
<label for="pig">Pig</label>
<br>
<input type="radio" id="pig1" value="Pig1" v-model="picked">
<label for="pig1">Pig</label>
<br>
<input type="radio" id="dog" value="Dog" v-model="picked">
<label for="dog">Dog</label>
<br>
<input type="radio" id="dog1" value="Dog1" v-model="picked">Dog1</input>
<br>
<input type="radio" id="duck"value="Duck" v-model="picked">
<lable for="duck" >Duck</lable>
<br>
<input type="radio" id="duck1" value="Duck1" v-model="picked">Duck1</input>
<br>
<span>Picked: {{ picked }}</span>
<br>
<br>
</div>
<div class="text">
<input type="text" v-model="text"></input>
<p>the text is {{text}}</p>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<input type="button" @click="submit" style="width:15px;">提交</input>
</div>
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</br>
<p style="color=red"> 7.建立新的组件，组件（标签）的父节点的id和生成的Vue的el中的内容保持一致，且组件中的data内容必须是函数;Nue.components是全局组件；组件是可复用的 Vue 实例</p>
<div id="components-demo">
<button-counter></button-counter>
</div>
</div>
<script type="text/javascript">
//全局变量vue的生成
var dat=
{
a:"内容为字符串是记得要加引号哦",
b:2,span:'<span style="color:blue">this is v-html</span>',
color1:'blue',
OK:false,
array:
[
{text:'这是一个项目'},
{text:'这里面是数组，数组要用用[]'},
{text:'表示集合每个元素要用｛｝包含'}
],
name: ['Aimmer'],
picked:"Pig",
text:"",
message:""
};
var app=new Vue
({
//两个属性
el:'#app',//元素创建，用Id选择器的方式选中
data:dat,//数据初始话的赋值
methods:
{
submit:function()
{
alert("I like "+this.name + " very much");
},
say: function (message) {
alert(message)
}
}
});
//app.$data.a='5';//数据更改，$作为标识符
//组件的建立，count是个变量
Vue.component('button-counter', {
data: function () {
return {
count: 10
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
new Vue({ el: '#components-demo' })
</script>
</script>
<style type="text/css">
/* 变量后面的值即为属性名*/
.blue
{
color:blue;
font-size:20px;
}
.line
{
margin-top:100px;
}
</style>
</body>
</html>
扫一扫
1232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
