Vue.js 基本功能了解
2021-06-27 12:04
标签：构建 ext 显示 条件 sage bind 详细 date() methods 隔了这么久才来出Vue的第二篇文章，真是堕落了，自己先惩罚下/(ㄒoㄒ)/~~ 1.简单的方式 Vue.js的核心是采用简洁的模板语法来声明式的将数据渲染进DOM！ 例1： 这已经生成了一个vue应用，现在数据和DOM已经绑定在一起，只要修改app.message，相应的也会更新DOM！ 例2： 例子2涉及到了Vue的特殊属性 v-bind 指令，也会在相应的DOM元素上渲染！ Vue不仅可以绑定DOM文本到数据，也可以绑定DOM结构到数据！ 1.条件 我们可以使用其中的 v-if 指令达到条件设置，而在实际应用中控制切换一个元素的显示也很简单。 例3： 同样的可以修改data属性来达到响应。 2.循环 每个指令都有特殊的功能，v-for 指令可以绑定数组的数据来渲染一个列表! 例4： 打开控制台，输入 app_3_2 Vue 提供了一个 例5： 为了让用户和你的应用进行互动，我们可以用 例6： 注意：在methods方法中，只更新了状态，没有触动到DOM! 一定要先注册完组件，再来实例化！ 一定要确保在初始化根实例之前注册了组件！ 否则未注册就使用会报错的！ 组件比较强大，可以扩展，封装可重用代码，就是比较腻害(*@ο@*) 哇～一定要好好的熟悉熟悉它！ 例7： 组件是很重要的一部分，当你熟悉完以上的内容后要好好研究组件系统，其中涉及到许多内容需要更详细的掌握。 在实际项目中使用时，多个页面有相同的part，组件复用简直厉害的不要不要~O(∩_∩)O~~ --------------------------------------------------------------- vue的基本功能介绍就到这里了，谢谢思密达O(∩_∩)O~~ 多多指教n(*≧▽≦*)n Vue.js 基本功能了解 标签：构建 ext 显示 条件 sage bind 详细 date() methods 原文地址：http://www.cnblogs.com/anniey/p/7147029.html一、写在前面
回过头看自己第一篇相关文章《初试 Vue.js》（http://www.cnblogs.com/anniey/p/6307138.html），简直惨不忍睹、不忍直视、辣眼睛，怎么可以这么啰嗦，废话好多哦，没脸看下去了~(o′?ェ?｀o)
都说入一门语言写好hello wrold开始，我上篇文章就已经打好这个头啦，不管是Vue1，还是2，现在咱们继续╰(*°▽°*)╯二、起步
创建好一个html文件，通过script的方式引入，如下：
2.其他的方式
参考官网给出的选项：
https://cn.vuejs.org/guide/installation.html三、数据的渲染
div id="app">{{ message }}div>
1
div id="app_2">
span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
span>
div>
1
四、条件与循环
1 div id="app_3">
2 p v-if="flags">Now you see mep>
3 div>
1
1 div id="app_3_2">
2 ul>
3 li v-for="todo in todos">
4 {{todo.text}}
5 li>
6 ul>
7 div>
1 var app_3_2=new Vue({
2 el:‘#app_3_2‘,
3 data:{
4 todos:[
5 { text:‘Learn JavaScript‘ },
6 { text:‘Learn Vue‘ },
7 { text:‘Learn Other ‘ }
8 ]
9 }
10 })
.todos.push({ text: ‘新项目‘ })，你会发现列表中添加了一个新项。五、双向绑定
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。1 div id="app5">
2 input type="text" v-model="msg2" />
3 p>{{msg2}}p>
4 div>
1 var app5 = new Vue({
2 el: ‘#app5‘,
3 data: {
4 msg2: ‘# hello ‘
5 }
6 })
六、界面交互
v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法!1 div id="app6">
2 p>{{message}}p>
3 button v-on:click="reverseMessage">Reverse Messagebutton>
4 div>
1 var app6=new Vue({
2 el:‘#app6‘,
3 data:{
4 message:‘Hello Vue.js!‘
5 },
6 methods:{
7 reverseMessage:function(e){
8 this.message=this.message.split(‘‘).reverse().join(‘‘);
9 }
10 }
11 })
七、组件构建（简单版）
1 div id="app_7">
2 ol>
3 todo-item v-for="list in itemsList" v-bind:todo="list">todo-item>
4 ol>
5 div>
1 Vue.component(‘todo-item‘,{
2 props:[‘todo‘],
3 template:‘
下一篇：PHP数据类型转换