下面都默认页面中引入了vue.js文件：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
待渲染的dom
我要评论
var example1=new vue({
el:'#example1',
data:{anyname:'这里就是上面的{anyname}里面的内容'}
});
上面是绑定了dom的文本，还可以绑定属性
var example2=new vue({
el:'#example2',
data:{
anyname:'这里就可以设置span的title属性了'
}
});
这里我们遇到了点新东西。你看到的v-bind属性被称为指令。指令带有前缀v-，以表示他们是vue提供的特殊属性。可能你已经猜到了，它们会在渲染的dom上应用特殊的响应式行为。简言之，这里该指令的作用是：“将这个元素节点的title属性和vue实例的anyname属性保持一致。
var example3=new vue({
el:"#example3",
data:{
anyname:true
}
});
其中的anyname属性被设置为true时则可见，false时则不可见。
var example4=new vue({
el:"#example4",
data:{
circle:[
{anyname:'这里就是循环输出的结果'},
{anyname:'循环多次也没有关系'}
]
}
});
可以使用v-on进行一个事件的绑定。
var example5=new vue({
el:'#example5',
data:{
anyname:'这里就是上面的声明式渲染'
},
methods:{
function_key:function(){
this.anyname='注意这里的this指的是example5，这个新实例化的vue实例';
}
}
});
vue还提供了v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。
var example6=new vue({
el:'#example6',
data:{
message:"这里就同时是input的value值和p的标签文本了"
}
});
是vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、自包含和通常可复用的组件构建大型应用。
在vue里，一个组件本质上一个拥有预定义选项的vue实例。
如下面定一个一个名为suckyourself的组件：
// component 的意思就是：组件 template 的意思是：模板
vue.component('suckyourself',{
template:'这里要被渲染的内容'
})
vue.component('suckyourself',{
props:['propertyname'],
template:"在这里也可以设置被vue渲染的内容：{{index.anyname}}"
});
这里我们设置了一个组件，在组件中我们采用了上面的循环，所以为了演示这个组件的作用以及使我们的循环生效，我们把上面的组件传递到下面的循环中去：
var example7=new vue({
el:"#example7",
data:{
circle:[
{anyname:'组建中使用循环的方式与上面单纯使用循环是一致的'},
{anyname:'上面那段代码的具体工作方式下面介绍'}
]
}
});
总结一下上面那段代码的组件引用方式：
创建组件，在组件中可以设置template作为模板以及props传入参数 在调用模板的过程中，可以配合上面讲的指令，进行设置，就好像在操作一般的dom一样 最后是为该这是的指令设置相应的代码 传入参数的方法是使用v-bind
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论